skills.rest
Stack-and-Flow
Stack-and-FlowOFFICIAL
Explore all skills by this author →
GitHub

component-spec-proposer

Convert component tasks and reference implementations into validated GitHub issue-backed specifications.

23|4|Updated May 7, 2025
Search Tags:#accessibility#requirements#design system#github issues#storybook#project workflow#component spec
One-click install
npx skills add https://github.com/Stack-and-Flow/design-system --skill component-spec-proposer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec-proposer
Source: https://github.com/Stack-and-Flow/design-system/tree/main/.atl/skills/component-spec-proposer
Command: npx skills add https://github.com/Stack-and-Flow/design-system --skill component-spec-proposer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts vague component tasks plus a reference implementation into a clear, issue-backed, validation-ready specification that aligns with the design system’s rules and Storybook/accessibility conventions.

Core Features & Use Cases

  • Reference-driven spec proposals: Extracts behavior, states, accessibility, anatomy, and examples from the provided reference.
  • Design-system alignment: Adapts the proposal to Stack-and-Flow tokens, the required component structure, and contribution-phase expectations.
  • Validation-first workflow: Prevents premature GitHub updates by requiring explicit user approval before writing “Validated component spec” and changing Project status.
  • Project + issue coordination: Updates the issue first, then sets the corresponding GitHub Project item to “In progress” after approval.

Quick Start

Ask the skill to propose a component spec by providing the GitHub issue URL and a HeroUI (or other) reference URL, then respond with approve or list required edits.

Frequently Asked Questions about component-spec-proposer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a component issue into an implementation specification?▼

You create an implementation specification by providing a component task and a reference implementation URL, which generates a validated spec covering behavior, states, accessibility, and Storybook story coverage.

What is a validation-first workflow for design system components?▼

A validation-first workflow for design system components requires explicit user approval before writing the validated spec and updating GitHub Project status, preventing premature repository changes.

How do I generate accessibility requirements from a reference component?▼

You generate accessibility requirements by providing a reference component URL, which extracts accessibility notes and anatomy to align with design system tokens and Storybook conventions.

Can I use a HeroUI reference to propose specs for a Stack-and-Flow design system?▼

Yes, you can use a HeroUI reference URL to propose specs for a Stack-and-Flow design system by adapting extracted behavior and states to required component structures and contribution-phase expectations.

When should I not use automated component spec generation?▼

You should avoid automated component spec generation when your design system work does not require issue-backed validation, Storybook story coverage, or alignment with specific repository conventions.

Related Skills

Explore More Product & Management Skills→
PiercingXXPiercingXX
1

shadcn

Generate Shadcn/ui-inspired design-system rules with WCAG 2.2 AA accessibility criteria.

Community
Intermediate
racciolyraccioly

speckit-taskstoissues

Convert spec tasks into GitHub issues via the GitHub MCP server.

Community
Advanced
EndavaEndava
160

review-component

Review BEEQ StencilJS components against design system standards.

Official
Advanced
hulusi-tunchulusi-tunc
3

component-spec

Generate component specifications with anatomy, variants, states, and accessibility guidelines.

Community
Advanced