Ui Design
This is your single entry point for any visual HTML/CSS/JS work, whether you're building a landing page, dashboard, or web app. It forces you to pick a build track upfront (hand-built static or component library), then runs a mandatory taste layer from an external GitHub skill for style decisions while keeping engineering quality (accessibility, responsiveness, performance, motion design) in house. The integration model is clean: taste-skill handles Brief Inference, Design Dials, and anti-slop rules, while ui-design owns track selection, component strategy, and delivery. One catch: it requires interactive pages to have actual motion design, not just static hover states. If you ship UI with Claude, this is the orchestration layer.
- skills.sh installs
- 1.8K
- GitHub stars
- 32
- last updated
- Aug 21, 2026
Install
$ npx -y skills add starchild-ai-agent/official-skills --skill ui-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
UI Design Skill
This skill is the single entry point for visual work.
Use it for any user-facing HTML/CSS/JS output: landing pages, dashboards, product UI, internal tools, and portfolio pages.
Step 1 — Pick the build track
Choose deliberately before coding:
- Track A (hand-built): static preview, vanilla HTML/CSS/JS, quick custom pages
- Track B (component library): React/Vite/Next project using shadcn/ui, HeroUI, or coss ui
Track decision and component-library strategy are always owned by ui-design.
Step 2 — Taste Overlay Contract (mandatory)
Inside ui-design workflow, invoke taste-skill for exactly these 3 style blocks:
- Brief Inference
- Design Dials (layout variance / motion intensity / visual density)
- Anti-slop hard rules
Boundary
ui-designkeeps ownership of engineering quality and delivery.taste-skillprovides style direction and anti-template taste constraints.
This avoids overlap with ui-design’s engineering references (component libraries, a11y, preview, data dashboard implementation).
Step 3 — Runtime order (use this every time)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/starchild-ai-agent/official-skills
- Categories
- Frontend Development, DevOps & CI/CD, Documentation, Code Review & Quality, AI & Agent Building, Debugging, Automation & Workflows, Design & UI/UX
- First seen
- Jul 14, 2026
More from starchild-ai-agent/official-skills
All 43- Image Tryon1.8K
- Okx1.7K
- Worldcup1.4K
- Feishu Binding1.4K
- Upbit1.3K
- Coinglass11.5K
- Wallet8.9K
- Hyperliquid8.7K
- Coingecko7.9K
- Twitter7.9K
- Skill Creator7.8K
- Twelvedata7.7K
- Skillmarketplace7.1K
- Orderly Onboarding7.1K
- Project Builder5.2K
- Browser Preview4.6K
- Charting4.4K
- Composio4.3K
- Coder4.1K
- Slide Creator4.1K
- Wallet Policy4.1K
- Community Publish4K
- Preview Dev4K
- Web Crawler3.9K
Recommended
More Frontend Development
senior-frontendalirezarezvani/claude-skillsFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, an1.7Kskills.sh installs
ui-design-systemdavila7/claude-code-templatesUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.7Kskills.sh installs
vtex-io-react-appsvtex/skillsApply when building React components under react/ or configuring store blocks in store/ for VTEX IO apps. Covers interfaces.json, contentSchemas.json for Site E1.7Kskills.sh installs
frontend-designcustomware-ai/skillsStrict frontend design guardrails for building modern, minimal-visual-noise, airy, non-generic app UIs. Use whenever creating or changing frontend UI, React com1.6Kskills.sh installs
ui-crafteduclopez/ui-craftUse for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidan1.6Kskills.sh installs
ui-designmblode/agent-skillsDesigns and builds UI: visual direction, Tailwind implementation, browser-comparable variants, screenshot-to-markup scaffolds, dark-mode and responsive retrofit1.5Kskills.sh installs