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

component-contributor

Implement design-system components from approved specs with Stack-and-Flow architecture.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps contributors implement or update a Stack-and-Flow design-system component without missing required architectural, accessibility, testing, and documentation steps.

Core Features & Use Cases

  • Workflow orchestration for component delivery: guides the contributor through onboarding (when needed), spec validation, planning, implementation order, visual review, and a pre-PR component audit.
  • Spec-driven implementation: extracts required behavior, props, variants, tokens, and accessibility rules from an approved issue/spec, and stops to ask when gaps exist.
  • GitHub/Project-board aware delegation: when delegated from sdd-apply, can follow the orchestrator’s SDD progress envelope; when working from an issue/card, can run START WORK and manage “In progress” status when allowed.
  • Strict repository conventions: enforces the project’s 6-file component pattern, TypeScript rules (e.g., type not interface), Storybook standards, and CI-friendly testing approach.

Quick Start

Use this skill when implementing a new or changed component; provide the approved component spec/issue so the agent can plan and implement the required files and gates.

Frequently Asked Questions about component-contributor

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

FAQPage Schema
How do I implement a design system component without missing required architecture and accessibility steps?▼

Design system component implementation requires a guided workflow that enforces the 6-file architecture, TypeScript rules, Storybook standards, and accessibility gates. This skill orchestrates spec-driven delivery by validating requirements and halting safely when gaps exist before a pull request.

What is the best way to manage Storybook and Vitest conventions when building Radix UI components?▼

Managing Storybook and Vitest conventions for Radix UI components requires loading shared contracts and reference rules. This skill enforces CI-friendly testing patterns, HTML prop inheritance, and strict repository conventions to ensure components pass visual and component audits.

How do I extract props, variants, and tokens from an approved spec to plan component implementation?▼

Extracting props, variants, and tokens from an approved spec involves validating the issue details and planning the implementation order. This skill parses the approved spec to extract required behavior and accessibility rules, stopping to ask questions when requirements are ambiguous or missing.

Does this component workflow support GitHub project board automation and status updates?▼

This component workflow supports GitHub project board automation by managing "In progress" status when allowed. When delegated from an orchestrator or working from an issue card, it can run START WORK and follow the SDD progress envelope throughout the implementation lifecycle.

Can I use this skill to update an existing design system component or only for new atoms and molecules?▼

You can use this skill to update an existing design system component or implement new atoms, molecules, and organisms. It applies to component implementation, story and test completion, documentation updates, and contributor workflow management for any required visual audits.

Related Skills

Explore More Software Engineering Skills→
launchapp-devlaunchapp-dev
38

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

Official
Advanced
redpanda-dataredpanda-data
34

setup-quality-gate

Set up a quality gate with biome, tsgo, and vitest.

Official
Advanced
tanaka-mambingetanaka-mambinge

react-component-creation

Scaffold React components with TypeScript props, Tailwind styling, and Radix primitives.

Community
Intermediate
neuron-oneneuron-one
25

frontend

Scaffold React and Next.js frontend modules with Tailwind styling and accessibility guidelines.

Community
Intermediate