frontend-design-guidelines

Name: frontend-design-guidelines
Author: sendaifun

162stars45forks

How to install frontend-design-guidelines?

sendaifun/solana-new/frontend-design-guidelines

$npx -y skills add sendaifun/solana-new --skill frontend-design-guidelines

Installs into the current project.

Summary

Apply high-quality web interface design rules when building, reviewing, or styling frontend code. Use when the user says "build a frontend", "create a component", "style this", "review my UI", "build a landing page", "design this page", "make this look good", "add animation", "bu

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"frontend-design-guidelines","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"frontend-design-guidelines","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	# Frontend Design Guidelines
48
49	A practical, enforceable ruleset for building frontend UIs that look and feel high-quality instead of generic. This skill exists because most AI-generated frontends ship with hardcoded colors, broken keyboard nav, missing empty states, and janky animations. This skill catches that before the user sees it.
50
51	## When to fire this skill
52
53	Apply these rules any time you are:
54
55	- Creating a new React / Next.js component or page
56	- Building a form, layout, dialog, or navigation
57	- Reviewing frontend code for quality
58	- Adding animations, transitions, or micro-interactions
59	- Styling anything with CSS, Tailwind, or CSS-in-JS
60	- A user asks you to "make it look good", "clean this up", "polish the UI", or similar
61
62	If you are generating frontend code and this skill has not been triggered, trigger it yourself. Do not wait for the user to ask.
63
64	## Default stack (use unless the user says otherwise)
65
66	- Framework: Next.js (App Router) + TypeScript
67	- Styling: Tailwind CSS
68	- Components: shadcn/ui — install per component via `npx shadcn@latest add <name>`
69	- Icons: `lucide-react`
70	- Animation: CSS transitions for micro-interactions. Use `framer-motion` only when you need shared-layout, gesture, or orchestrated sequences.
71	- Fonts: `next/font` with a sans (Inter or Geist) for UI and a mono (JetBrains Mono or Geist Mono) for code/numbers.
72	- Theming: shadcn's CSS variables so light/dark work automatically.
73
74	If the repo already has a different stack, match it. Do not rewrite the stack.
75
76	## Workflow
77
78	0. Check for `brand.md` at the project root. Three cases:
79
80	Case A — `brand.md` exists with a real palette (any status other than `deferred`):
81	Read it. Use the documented palette, typography, and voice as the source of truth for every color, font, and copy decision in this session. Do not prompt.
82
83	Case B — `brand.md` exists with `Status: deferred`:
84	The user previously chose to defer brand setup. Do not prompt again in this session or any future session until the user explicitly runs `brand-design`. Use stock shadcn neutral tokens. Continue to step 1.
85
86	**Case C — `brand.md` d

People who liked this also viewed

6 picks

Type

frontend-design-guidelines

162stars45forks

View on GitHub

How to install frontend-design-guidelines?

sendaifun/solana-new/frontend-design-guidelines

$npx -y skills add sendaifun/solana-new --skill frontend-design-guidelines

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"frontend-design-guidelines","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"frontend-design-guidelines","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	# Frontend Design Guidelines
48
49	A practical, enforceable ruleset for building frontend UIs that look and feel high-quality instead of generic. This skill exists because most AI-generated frontends ship with hardcoded colors, broken keyboard nav, missing empty states, and janky animations. This skill catches that before the user sees it.
50
51	## When to fire this skill
52
53	Apply these rules any time you are:
54
55	- Creating a new React / Next.js component or page
56	- Building a form, layout, dialog, or navigation
57	- Reviewing frontend code for quality
58	- Adding animations, transitions, or micro-interactions
59	- Styling anything with CSS, Tailwind, or CSS-in-JS
60	- A user asks you to "make it look good", "clean this up", "polish the UI", or similar
61
62	If you are generating frontend code and this skill has not been triggered, trigger it yourself. Do not wait for the user to ask.
63
64	## Default stack (use unless the user says otherwise)
65
66	- Framework: Next.js (App Router) + TypeScript
67	- Styling: Tailwind CSS
68	- Components: shadcn/ui — install per component via `npx shadcn@latest add <name>`
69	- Icons: `lucide-react`
70	- Animation: CSS transitions for micro-interactions. Use `framer-motion` only when you need shared-layout, gesture, or orchestrated sequences.
71	- Fonts: `next/font` with a sans (Inter or Geist) for UI and a mono (JetBrains Mono or Geist Mono) for code/numbers.
72	- Theming: shadcn's CSS variables so light/dark work automatically.
73
74	If the repo already has a different stack, match it. Do not rewrite the stack.
75
76	## Workflow
77
78	0. Check for `brand.md` at the project root. Three cases:
79
80	Case A — `brand.md` exists with a real palette (any status other than `deferred`):
81	Read it. Use the documented palette, typography, and voice as the source of truth for every color, font, and copy decision in this session. Do not prompt.
82
83	Case B — `brand.md` exists with `Status: deferred`:
84	The user previously chose to defer brand setup. Do not prompt again in this session or any future session until the user explicitly runs `brand-design`. Use stock shadcn neutral tokens. Continue to step 1.
85
86	**Case C — `brand.md` d

People who liked this also viewed

6 picks

Type