Ui Skills
Keep agent-generated UI consistent by applying opinionated interface constraints across many small components and screens.
Overview
ui-skills is a journey-wide agent skill that applies opinionated UI constraints so solo builders keep agent-built interfaces coherent before committing to more implementation.
Install
npx skills add https://github.com/nexu-io/open-design --skill ui-skillsWhat is this skill?
- Opinionated, evolving UI constraints curated from @ibelick ui-skills upstream
- Open Design catalogue entry (design-system mode) for agent discovery during planning
- Trigger phrases: ui constraints, ui guide, opinionated ui, ui rules
- Helps coherence when agents produce many small UI pieces in one product
- Full upstream bundle must be installed separately for scripts and reference assets
- Four documented trigger phrases in skill frontmatter (ui constraints, ui guide, opinionated ui, ui rules)
Adoption & trust: 829 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent outputs UI fragments that clash in spacing, hierarchy, and component style across a growing app.
Who is it for?
Indie builders iterating many screens with Claude Code, Cursor, or similar agents who lack a full in-house design system doc.
Skip if: Teams that already enforce a complete Figma design system with automated linting and do not need agent-side opinionated rules.
When should I use this skill?
User mentions ui constraints, ui guide, opinionated ui, or ui rules—or asks for coherent agent-built interfaces.
What do I get? / Deliverables
You invoke ui-skills (or install the upstream bundle) so subsequent interface work follows shared constraints and stays visually coherent.
- Agent responses constrained by documented UI rules
- Pointer to upstream bundle when full workflow is required
Recommended Skills
Journey fit
Useful at every journey phase - explore requirements and options before committing to a direction.
Where it fits
You prototype a landing layout and invoke ui-skills so hero, nav, and CTA sections share one spacing and typography rhythm.
You scaffold a settings area with many forms and apply ui-skills triggers so each panel matches the same component language.
Before release you rerun ui constraints to reconcile drift between dashboard and onboarding flows.
You refresh marketing pages and use the skill so new sections align with in-app UI tone.
How it compares
Design-system constraint skill—not a component library installer or a visual mockup generator.
Common Questions / FAQ
Who is ui-skills for?
Solo builders and small teams using agents to ship web or app UI who want consistent opinionated rules without a dedicated designer on every task.
When should I use ui-skills?
During Build for new screens, during Ship review when UI feels inconsistent, or before Launch when polishing marketing pages—whenever you say ui constraints or ui rules.
Is ui-skills safe to install?
Review the Security Audits panel on this Prism page; the catalog entry is metadata—verify the upstream GitHub bundle before copying scripts into your agent environment.
SKILL.md
READMESKILL.md - Ui Skills
# ui-skills > Curated from @ibelick. ## What it does Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces. ## Source - Upstream: https://github.com/ibelick/ui-skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/ibelick/ui-skills ``` Then ask the agent to invoke this skill by name (`ui-skills`) or with one of the trigger phrases listed in this skill's frontmatter.