co-star-ui
Skill1 starsChanged 9 months agoMITView on GitHub
CO-STAR UI Creator for React/Next.js: structured prompting to build or integrate UI (components, pages, design systems) or to create custom CO-STAR prompts. Use when the user wants to add hero sections, dashboards, design tokens, shadcn/Magic UI/Aceternity integration, Newsprint design system, or to draft their own CO-STAR prompt (Context, Objective, Style, Tone, Audience, Response). Always run discovery questions first, then plan, then implementation.
In this repository15 other files it gives its agents.
- .cursor/rules/AGENT.mdcCursor rule
- .cursor/rules/AI Text Humanizer Specialist.mdcCursor rule
- .cursor/rules/App_reviewer.mdcCursor rule
- .cursor/rules/maintainer.mdcCursor rule
- .cursor/rules/production.mdcCursor rule
- .cursor/rules/Project_Manager.mdcCursor rule
- .cursor/rules/README.mdcCursor rule
- .cursor/rules/rules.mdcCursor rule
- agent-hubSkill
- blueprintkitSkill
- context-engineeringSkill
- core-engineeringSkill
- erc8004-agent-creatorSkill
- startupSkill
- webmcp-agentsSkill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 23
Signals for prompt creator: create my prompt, custom prompt, my own CO STAR, design system doc, template for our product.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
CO STAR UI Skill
Structured CO-STAR prompting for UI work: Context, Objective, Style, Tone, Audience, Response. The skill supports two modes and requires choosing one before proceeding.
Decision: Which Mode to Use
| If the user wants to… | Use | Action |
| Build or change UI — components, pages, design system, shadcn/Magic UI/Aceternity, refactors, hero/dashboard/landing | UI build mode | Follow references/co-star-prompt.md. Discovery questions first, then integration plan and code. |
| Create a custom CO-STAR prompt — their own prompt, design system doc, or CO-STAR template from scratch | Prompt creator mode | Follow references/co-star-creator.md. Guide them through Context, Objective, Style, Tone, Audience, Response. |
| Unclear or mixed | Weigh main ask. Implementation → prompt first; "create my prompt" → creator first. |
Signals for UI build: build, implement, add, refactor, component, page, design system, shadcn, Tailwind, React, Next.js, hero, dashboard, landing, integrate.
Signals for prompt creator: create my prompt, custom prompt, my own CO STAR, design system doc, template for our product.
Non-Negotiable Pre-Actions
- Locate the correct resource (co-star-prompt vs co-star-creator) from the decision table above.
- Do not suggest code or libraries until you have run scoped discovery questions (tech stack, existing UI lib, design direction, target page/feature). Keep to 5–10 questions.
- After answers, respond with: integration strategy, token/primitive definitions, component patterns, negative constraints (anti-patterns), and a critique loop (2–4 risks, one small first slice, and "which component or page first?").
Flow (UI Build Mode)
- Scoped questions first — Framework, styling, existing tokens/components, constraints, goal (re-skin vs new theme vs one page).
- Integration strategy — Which base (e.g. shadcn + Radix), which registries (Tailark, Magic UI, Aceternity), which animation (React Bits, Anime.js) if any. Keep the set minimal.
- Concrete plan — Tokens, core components, then marketing/dashboard layers. Code sketches in the user’s stack (Tailwind, CSS modules, etc.).
- Negative constraints — No multiple full UI suites, no mixing incompatible design languages, no heavy animation everywhere. Normalize tokens when copy-pasting.
- Critique loop — List trade-offs, suggest one small first slice, ask what to tackle first.
Flow (Prompt Creator Mode)
- Guide the user through Context (existing codebase, stack, target design system).
- Then Objective (mental model, minimal abstractions, migration plan, implementation guidance, critique).
- Then Style, Tone, Audience, Response format (two phases: scoped questions first, then implementation plan + code sketches).
- Include negative constraints and edge cases in the resulting prompt.
Resources
- references/co-star-prompt.md — Full CO-STAR prompt for building/integrating UI (modern React ecosystem, registries, copy-paste vs npm). Read when the user is in UI build mode.
- references/co-star-creator.md — Full CO-STAR prompt for Newsprint UI Creator (design system integration, tokens, primitives). Use for prompt-creator mode or for Newsprint-specific builds.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.