Individual skill
frontend-component-build
Build 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.
dist/pi/.agents/skills/frontend-component-build/SKILL.md
Source commit 9b90db257f7395fab76ff9bfcb808456709f6af3
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,047
- Repository last updated
- Oct 27, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- claude Repository topic
- claude-skills Repository topic
- anthropic Repository topic
- mcp Repository topic
- seo Repository topic
- web-development Repository topic
- agent-skills Repository topic
- claude-code Repository topic
- product-management Repository topic
- web-design Repository topic
- design Derived category
- engineering Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 8,657 bytesreferences/accessibility-patterns.mddoc · 8,072 bytesreferences/component-api-patterns.mddoc · 8,038 bytesreferences/component-spec-template.mddoc · 7,070 bytes
Read excerpt
# Frontend Component Build
Build production-ready components. Stack-agnostic principles. Most patterns translate to React, Vue, Svelte, or vanilla web components.
This skill is about implementing a component well. For broader system design see `design-system`. For day-to-day visual decisions see `design-standards`.
---
## When to use
- Building a new component from scratch
- Refactoring an existing component
- Designing a component API (props, slots, events)
- Adding accessibility to an existing component