/style

Apply styling to a component using the project's design system and styling approach.

Boost this command

rohitg00@rohitg00

GitHub

From plugin

rohitg00-claude-code-toolkit

2.6k199 skills138 agents199 commands

Install

$ npx -y skills add rohitg00/awesome-claude-code-toolkit --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/style

Context preview

What this command does when you run it.

Apply styling to a component using the project's design system and styling approach.

Command definition

style.md

Apply styling to a component using the project's design system and styling approach.

Steps

1. Identify the project's styling approach: 2. Review the component's visual requirements: 3. Apply base styles: 4. Add interactive states: 5. Add responsive behavior: 6. Add dark mode support if the project uses themes. 7. Verify visual consistency with existing components.

Format

Component: <name>
Styling: <approach used>
Tokens Used: <colors, spacing, typography>
Breakpoints: <responsive behavior>

Rules

Use design tokens instead of hardcoded values.
Follow the project's naming conventions for CSS classes.
Ensure sufficient color contrast (WCAG AA: 4.5:1 ratio).

Read it on GitHub ↗

Ships withrohitg00-claude-code-toolkit

The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills (+400,000 via SkillKit), 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 15 MCP configs, 26 companion apps, 53 ecosystem entries, and more.

Get the whole plugin

Stats

Python JavaScript React CSS Kubernetes

+7 tags

AWS Git GitHub CI/CD Anthropic MCP Flutter

2,612

Stars

955

Forks

Maintained

Maintenance

JavaScript