Frontend Component Build
rampstackco/claude-skillsBuild production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable.
At a glance
This skill is for Coding and helps you build a reusable frontend component, design a component api and props, and implement accessible ui markup.
/plugin marketplace add rampstackco/claude-skills
/plugin install frontend-component-build
Setup, runtime and requirements describe rampstackco/claude-skills, the repo this skill ships in.
reactaccessibilityComponent DesigntypescriptUi Patterns
Also in rampstackco/claude-skills
View the repoRun a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust principles. Use this skill whenever...
How to produce ad creative that converts at performance scale. Hook patterns, format selection, video pacing, variation systems, sequential...
How to read paid media dashboards without fooling yourself. Attribution models, platform reporting quirks, multi-platform reconciliation, RO...
Run a structured after-action review (postmortem, retrospective) on a launch, incident, or completed project to capture timeline, root cause...
How humans and AI compose in content workflows. Where AI legitimately participates, where humans must own, hybrid workflow patterns, voice o...
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementat...
Direct visual and creative work for campaigns, photography, illustration, video, and branded experiences. Use this skill whenever the user w...
Plan and run backups, set recovery objectives, and run disaster recovery drills. Use this skill when defining RPO/RTO targets, designing bac...
Running closed and open betas that produce real signal. Beta participant selection, structured feedback collection, beta-to-GA decision crit...
Apply pre-composed aesthetic archetype defaults to jumpstart brand design work covering color, typography, layout, voice, and imagery direct...
Run upstream brand discovery covering audience research, competitive landscape, category dynamics, problem space, and positioning territory...
Generate, evaluate, and narrow brand concepts during early ideation including positioning territories, naming candidates, mood directions, a...
Other Coding skills
Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make...
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI be...
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-design...
Reference for the Claude API / Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model...
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...
Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor...