skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-build

Build UI screens using StyleSeed's composed design grammar with code and pixel verification gates.

Updated May 26, 2026
Search Tags:#design system#ui design#visual verification#frontend build#design grammar#styleseed#brand tokens
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-build-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-build
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-build
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-build-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building UI screens without a consistent design system leads to improvised layouts, brand drift, and unverified visual output. This Skill enforces a structured design method that resolves an effective rule set before writing code and validates the result with scoring and rendering gates. ## Core Features & Use Cases - Rule Resolution Before Code: Compiles an effective rule set from grammar, brand recipe, domain, page, profile, and lock constraints via ss-resolve, recorded in .styleseed/effective-rules.md and a provenance manifest. - Composed Design Authority: Applies a fixed authority order (core invariants, grammar, surface adapter, brand recipe, profile, lock) so conflicts resolve predictably instead of ad hoc. - Code and Pixel Gates: Runs /ss-score until the implementation scores at least 80, then /ss-verify to inspect rendered viewports and states before presenting results. - Use Case: A developer building a SaaS dashboard invokes the Skill to compose the operations-console grammar with locked brand tokens, implement the screen, and iterate through scoring and visual verification until both gates pass. ## Quick Start Ask the agent to build a dashboard screen using the ss-build method with your existing STYLESEED.md configuration.

Frequently Asked Questions about ss-build

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

FAQPage Schema
How do I build a UI screen with a design grammar?▼

Run the ss-build workflow: resolve the effective rule set first, compose the screen following the grammar's composition and type contracts, then pass the code score gate and pixel verification gate before presenting the result.

What is the difference between an output grammar and a brand recipe?▼

An output grammar is functional, defining the user job, composition, density, and state contracts. A brand recipe is morphological, defining containment, geometry, and control styling. Neither substitutes for the other.

Do I need STYLESEED.md before building a screen?▼

Yes. If STYLESEED.md does not exist, run /ss-setup to create it before writing any UI code. The build step resolves rules from this file into .styleseed/effective-rules.md.

What happens if the code score stays below 80?▼

Fix the highest-gain failures and re-score, up to roughly three passes. If the implementation still cannot reach 80, report the real blocker instead of presenting the screen as passing.

Can a brand profile override accessibility requirements?▼

No. Conflicts resolve by authority order, and a profile or lock cannot waive task fitness, coherence, or accessibility. Core invariants always take precedence over aesthetic profiles.

Related Skills

Explore More Design & Creative Skills→
paulokakomapaulokakoma

frontend-blueprint

Coordinate discovery-first design workflows before frontend code is written.

Community
Advanced
kks0488kks0488
10

vcf

Invoke the vc-phase-loop skill with default execution rules.

Community
Basic
tmarsbrtmarsbr

ui-visual-validator

Identify visual differences between current UI builds and the approved baseline.

Community
Advanced
Asymmetric-alAsymmetric-al
417

moai-library-shadcn

Install, compose, and customize shadcn/ui components with Tailwind CSS tokens.

Official
Intermediate