UI Component Build
Build one component or screen the same way every time: state inventory, props API, a11y, tests, and a verified build.
Before & after
Same prompt, same agent — the only difference is the skill.
For CS frontend, you'd probably want to prioritize work that has the biggest impact on your customers. That could be bug fixes, performance improvements, new features they're asking for, or improvements to the user experience. You'd also want to think about technical debt—things like code refactoring or dependency updates that will make your life easier long-term. It's usually a good idea to balance customer-facing work with internal improvements. You could look at your backlog and rank items by impact to customers, effort required, and strategic value. Do you have user feedback about what's causing friction? That might help you figure out what to prioritize.
CS FRONTEND PRIORITY FRAMEWORK (repeatable sprint planning) INPUT SOURCES (gather before sprint) → Support tickets (CS team reported: 8 'login timeout' issues, 4 'dashboard loads slow') → User feedback (NPS comments: 2 requests for mobile optimization, 1 for dark mode) → Product roadmap (Q3 goal: onboarding flow improvement) → Technical debt log (3 legacy dependencies overdue for upgrade; TypeScript compiler warnings in auth.ts) → Metrics (page load avg: 3.2s target, current: 4.1s) RANKED PRIORITY STACK TIER 1 (CUSTOMER-BLOCKING) → Fix login timeout issue (support: 8 tickets, affects 15+ users, 2-hour fix) → Sprint day 1 → Dashboard load optimization (current 4.1s → target 2.5s; performance budget exceeded) → Sprint day 2-3 → Migrate to new auth library (blocking future SSO feature; legacy dependency EOL in 60 days) → Sprint day 3-4 TIER 2 (VALUE-ADD, IF TIME) → Mobile-responsive improvements (2 NPS comments; low complexity; 1 day) → Dark mode toggle (1 NPS comment; not blocking; defer unless day 5 exists) TIER 3 (TECH DEBT, BACKLOG) → TypeScript compiler warnings cleanup (code quality; no user impact; assign to next sprint if time permits) → Upgrade remaining dependencies (3 packages; not urgent; schedule for next month) SPRINT COMMITMENT (5 days) → Day 1: Login issue fix + unit tests → Day 2-3: Dashboard performance deep-dive (profiling, lazy-loading, cache strategy) → Day 4: Auth migration (spike + proof of concept) → Day 5: Buffer for code review, QA, spillover → NOT included: Dark mode, TypeScript warnings (defer) VALIDATION (end-of-sprint) → Did we close 8 login-timeout support tickets? (metric: tickets closed) → Is dashboard load < 2.5s? (metric: Lighthouse score) → Is auth migration on track? (metric: PoC merged)
About this skill
Stop shipping components that are missing their error state. This workflow lists every UI state before any code, designs the API, places state correctly, and doesn't call it done until tests and the build pass.
What it does
- Reads similar components in your codebase first and matches their conventions
- Writes a state inventory: loading, empty, error, success, overflow, disabled, and submitting
- Designs a minimal props API and decides state placement (local, parent, URL, or data layer)
- Implements with semantic HTML, keyboard support, and your existing primitives and tokens
- Tests each state and runs typecheck, lint, tests, and a production build
What you get
A handoff summary with the state inventory and test mapping, the props type, state placement decisions, files changed, verification results, and open design questions.
Best for
Frontend developers and teams who want consistent component quality from task to task.
SKILL.md preview
---
name: ui-component-build
description: Build one UI component or screen from spec to merged-ready code using a fixed sequence - state inventory, props API, state placement, accessible markup, tests, and build verification - so quality does not depend on the task. Use when the user asks to build, implement, or add a specific component, form, modal, table, or page in an existing frontend codebase, including casual asks like "make me a dropdown for this", "can you build the settings modal", or "I need a table that shows these users".
---
# UI Component Build
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.