JustineDevs/co-star-ui
.cursor/skills/co-star-ui/SKILL.md
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.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add JustineDevs/E-Commerce co-star-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 3:37 AM29.1s3 files scanned
SKILL.md
- name:
- co-star-ui
- description:
- 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.
- license:
- See repository LICENSE
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.
Related Skills
JustineDevs/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
SKILL.mdUpdated Apr 17, 2026
JustineDevs/ui-ux-pro-max
tools
VerifiedTrustedCommunity
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
SKILL.mdUpdated Apr 17, 2026
JustineDevs/test
development
VerifiedTrustedCommunity
Runs and scopes automated tests for this Turborepo (unit, package filters, Medusa stress, E2E, release gate). Use when the user asks to run tests, verify CI locally, debug failing tests, or choose the right test command for a changed package.
SKILL.mdUpdated Apr 17, 2026
JustineDevs/stripe-integration
development
VerifiedTrustedCommunity
Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.
SKILL.mdUpdated Apr 17, 2026