tailwind-design

Name: tailwind-design
Author: Themis128

Tailwind CSS & Design System Instructions

by Themis128(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Instruction file imported from Themis128/figma-cloud-portfolio (.github/instructions/styling/tailwind-design.instructions.md). Copyright stays with the author.

Tailwind CSS & Design System Instructions

Tailwind v4 Syntax

Use bg-linear-to-r (NOT bg-gradient-to-r) for gradients
Use Tailwind utility classes for all styling; avoid inline styles

Design Language — Dark Cyberpunk

Primary accent: cyan (text-cyan-400, border-cyan-400, shadow-cyan-500/20)
Glass cards: bg-card/40 backdrop-blur-sm border border-border/20
Headings: uppercase tracking-[0.15em] or tracking-wider
Dividers: w-16 h-1 bg-linear-to-r from-cyan-400 to-blue-500 rounded-full
Mono font: font-mono for numbers, code snippets, and labels (JetBrains Mono)

Responsive

Mobile-first: start with base styles, add sm:, md:, lg: breakpoints
Test layouts at 320px, 768px, and 1280px widths

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/themis128-figma-cloud-portfolio-tailwind-design-instructions/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

themis128-figma-cloud-portfolio-tailwind-design-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "themis128-figma-cloud-portfolio-tailwind-design-instructions",
  "kind": "skill",
  "name": "tailwind-design",
  "description": "Tailwind CSS & Design System Instructions",
  "publisher": "Themis128",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Tailwind CSS & Design System Instructions"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/Themis128/figma-cloud-portfolio",
      "path": ".github/instructions/styling/tailwind-design.instructions.md",
      "ref": "efd6fbf485c86b81d803b6fab6e83880e080b371",
      "url": "https://github.com/Themis128/figma-cloud-portfolio/blob/efd6fbf485c86b81d803b6fab6e83880e080b371/.github/instructions/styling/tailwind-design.instructions.md",
      "key": "Themis128/figma-cloud-portfolio/.github/instructions/styling/tailwind-design.instructions.md"
    },
    "applies_to": "**/*.{tsx,css}"
  },
  "instructions": "# Tailwind CSS & Design System Instructions\n\n## Tailwind v4 Syntax\n- Use `bg-linear-to-r` (NOT `bg-gradient-to-r`) for gradients\n- Use Tailwind utility classes for all styling; avoid inline styles\n\n## Design Language — Dark Cyberpunk\n- **Primary accent**: cyan (`text-cyan-400`, `border-cyan-400`, `shadow-cyan-500/20`)\n- **Glass cards**: `bg-card/40 backdrop-blur-sm border border-border/20`\n- **Headings**: `uppercase tracking-[0.15em]` or `tracking-wider`\n- **Dividers**: `w-16 h-1 bg-linear-to-r from-cyan-400 to-blue-500 rounded-full`\n- **Mono font**: `font-mono` for numbers, code snippets, and",
  "cost": {
    "context_tokens": 191
  }
}

Fetch it by URL: GET /api/v1/registry/themis128-figma-cloud-portfolio-tailwind-design-instructions/manifest?version=1.0.0

About

Tailwind CSS & Design System Instructions

Tailwind v4 Syntax

Design Language — Dark Cyberpunk

Responsive

Use it

Manifest

Reviews