frontend-design

Name: frontend-design
Author: jameslcowan

Distinctive production-grade frontend — avoid generic AI aesthetics; use frontend-design skill

by jameslcowan(0) 0 installs

Free

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

See reviews

About

Instruction file imported from jameslcowan/kleto-go (.cursor/rules/frontend-design.mdc). Copyright stays with the author.

Frontend design

When building UI, follow .cursor/skills/frontend-design/SKILL.md (adapted from Anthropic frontend-design).

Before coding UI

Data-first — domain model confirmed; UI reflects real entities and states.
Design direction — pick a bold aesthetic (tone, typography, color, motion); do not default to generic AI layouts.
Ask the user if brand, audience, or accessibility constraints are unknown.

Implementation

Production-grade, accessible, cohesive
No cookie-cutter purple gradients, Inter/Roboto-only stacks, or identical layouts every time
Match complexity to vision (maximalist vs minimal)

Verification

Run build/lint/test from .cursor/verify.json yourself
Stop hook enforces git/verify rules; this rule enforces design discipline when UI files are in context

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/jameslcowan-kleto-go-frontend-design-rule/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.

jameslcowan-kleto-go-frontend-design-rule.ocm.jsonjson

{
  "ocm": "1",
  "id": "jameslcowan-kleto-go-frontend-design-rule",
  "kind": "skill",
  "name": "frontend-design",
  "description": "Distinctive production-grade frontend — avoid generic AI aesthetics; use frontend-design skill",
  "publisher": "jameslcowan",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github-cursor-rules"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Distinctive production-grade frontend — avoid generic AI aesthetics; use frontend-design skill"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-cursor-rules",
      "repository": "https://github.com/jameslcowan/kleto-go",
      "path": ".cursor/rules/frontend-design.mdc",
      "ref": "f5a124828cf0d0ba88ea5b85d9840e9c983a245c",
      "url": "https://github.com/jameslcowan/kleto-go/blob/f5a124828cf0d0ba88ea5b85d9840e9c983a245c/.cursor/rules/frontend-design.mdc",
      "key": "jameslcowan/kleto-go/.cursor/rules/frontend-design.mdc"
    },
    "applies_to": "**/*.{tsx,jsx,vue,css,scss,html,astro,svelte}"
  },
  "instructions": "# Frontend design\n\nWhen building UI, follow `.cursor/skills/frontend-design/SKILL.md` (adapted from [Anthropic frontend-design](https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md)).\n\n## Before coding UI\n\n1. **Data-first** — domain model confirmed; UI reflects real entities and states.\n2. **Design direction** — pick a bold aesthetic (tone, typography, color, motion); do not default to generic AI layouts.\n3. **Ask the user** if brand, audience, or accessibility constraints are unknown.\n\n## Implementation\n\n- Production-grade, accessible, co",
  "cost": {
    "context_tokens": 233
  }
}

Fetch it by URL: GET /api/v1/registry/jameslcowan-kleto-go-frontend-design-rule/manifest?version=1.0.0