Packs
4 packs@owl-listener
Design Systems
Design system skills: component specs, design tokens, naming conventions, spacing and grid systems, accessibility standards, and documentation.
11 skills · pack
curated
Ship Brand Design Guide
Generate a brand design guide including color palette, typography, UI components, and mockups.
5 skills · pack
curated
Create Design System Documentation
Generate component specifications, pattern library entries, and design system documentation for UI consistency.
8 skills · pack
curated
Build Accessible React UI
Install this pack to build an accessible, performant React UI component from design to audit.
4 skills · pack
Results for “component-design”
7 skillsui-designer
Designs accessible, consistent user interfaces using atomic design methodology, design systems, and WCAG 2.1 AA standards, producing annotated specs for developer handoff.
2
flow-design
Designs an approval-gated feature specification from approved requirements, covering architecture decisions, component boundaries, quality constraints, and definition of done.
2 · bundle
breakdown-feature-implementation
Creates detailed technical implementation plans for features based on a Feature PRD, including system architecture, database schema, API design, and frontend component hierarchy.
36.2k
More results
n8n-subworkflows
Build reusable, composable n8n sub-workflows with typed inputs, stateless or stateful design, and discoverable naming conventions.
5.7k · bundle
screen-flows
Guides the design and review of interactive Salesforce Flow screens, covering navigation, validation, component choice, and commit timing to avoid common UX failures.
15 · bundle
design-an-api
Designs the contract for an API change inside one codebase — a component's props, a function surface, URL or query parameters, an event payload, or a module boundary — through a discovery pass, an options document with one recommendation, a question round, and an adversarial validation round, with every element of the contract justified from one stated goal. Use when you want to design, shape, decide, or nail down an interface, contract, signature, or API change for a capability you can already describe, sized for roughly one pull request. Produces a design document and changes no code. Does not specify what a feature should do — use plan-a-feature. Does not plan delivery or sequencing — use plan-implementation. Does not assess the architecture of existing code — use architectural-analysis. Does not write the code — use tdd. Does not restructure existing code — use refactor. Runs its rounds without pausing for review; to review each round as it lands, use pairing.
218 · bundle
page-brief
Create OR review a page-brief — the artifact BETWEEN a wireflow and the full PRD. It turns each unique page/screen of a product into documented requirements TIED TO JOBS: a self-contained board card per page (what the page is accountable for, the job-tagged checklist of what it must let you do, the journeys it appears in, what it connects to, and the acceptance criteria that say how you'd know it's right). It is the "PRD per page", not a sitemap — and it stops ABOVE the screen: no components, no layout, no hierarchy. Use whenever the user wants to "spec the pages", "document each screen", turn a wireflow + live design into per-page requirements, or asks "what does this page need to do / which jobs pass through it" — even if they never say "page-brief". Natural NEXT STEP after the wireflow skill. ALSO use it to REVIEW an existing page-brief / screen catalog. In the A-Team pipeline this is a definition-phase skill: output lands in docs/features/<slug>/briefs/pages/, job codes are the durable [[NN]] ids from doc
0 · bundle