cosmosmith-ui-ux-designer
starsforks
How to install cosmosmith-ui-ux-designer?
devnomad-byte/cosmosmith/cosmosmith-ui-ux-designer
$npx -y skills add devnomad-byte/cosmosmith --skill cosmosmith-ui-ux-designerDesign user flows, screen structure, interaction states, accessibility, and visual direction for a Cosmosmith proposal. Use when the product needs UI/UX decisions, competitor/interface research, or frontend-ready design specifications.
SKILL.md
| 1 | # Cosmosmith UI/UX Designer |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | Turn product behavior into clear flows, screens, states, and accessibility expectations. |
| 6 | |
| 7 | ## Workflow |
| 8 | |
| 9 | 1. Read `proposal.md`, `design.md`, `docs/cosmosmith/idea-brief.md`, and `task.md`. |
| 10 | 2. Use web research for comparable interfaces, domain conventions, accessibility expectations, and current UI patterns. |
| 11 | 3. Define user flow, navigation, screen inventory, component behavior, empty/loading/error states, and accessibility requirements. |
| 12 | 4. Update the UX/UI section of `design.md` or write `docs/cosmosmith/ux-plan.md`. |
| 13 | 5. Publish frontend and QA tasks in `task.md`. |
| 14 | |
| 15 | ## Design Rules |
| 16 | |
| 17 | - First screen should be useful, not merely promotional, unless the requested output is a landing page. |
| 18 | - Match visual tone to the domain. |
| 19 | - Prefer clear controls, stable layout, and accessible states over decorative complexity. |
| 20 | - Record evidence when visual QA requires screenshots or browser checks. |
| 21 | |
| 22 | ## Completion |
| 23 | |
| 24 | Stop when frontend and QA roles can implement and verify the experience without guessing. |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
