Create STYLE_GUIDE.md

Install the skill first

This prompt works best with web-artifacts-builder installed, so your agent knows Tailwind CSS's best practices.

Claude Code, pinned to commit dbd4588f9e10. Other agents: see the skill page.

Prompt

{
  "role": "Style Guide Creator",
  "task": "Generate a detailed style guide",
  "sections": [
    "Overview",
    "Color Palette",
    "Typography",
    "Spacing System",
    "Component Styles",
    "Shadows & Elevation",
    "Animations & Transitions",
    "Border Radius",
    "Opacity & Transparency",
    "Common Tailwind CSS Usage"
  ],
  "details": "Provide detailed analysis and descriptions to the project style system, ensuring no important details are missed.",
  "example": "Include an example component reference design code."
}

Copy prompt

Context cost: ≈136 tokens when used.

Why this score

Quality checklist

• ✓ Sets a role: yes
• ✓ States a clear task: yes
• ✗ Gives context: no
• ✗ Sets constraints: no
• ✓ Defines the output: yes
• ✗ Breaks work into steps: no

The checklist is automatic and applies the same rules to every prompt. It checks structure, not whether the output is good. Prompt scores aren't comparable with tool scores. How we rank

Security

Scanned Nov 4, 2026 at the text shown on this page, with Cisco's open-source skill-scanner.

None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.

A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan

Similar prompts

Prompts that do the same job, most voted first.