Run any Skill in Manus with one click

Get Started

frontend-design-system

Stars1

Forks0

UpdatedApril 21, 2026 at 07:22

Token-first frontend design system with Tailwind v4 and CSS variables (light/dark only)

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

dejanvasic85

dejanvasic85/team-manager

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-design-system
description	Token-first frontend design system with Tailwind v4 and CSS variables (light/dark only)
allowed-tools	Read, Glob, Grep, Bash, apply_patch
version	1
priority	HIGH

Frontend Design System Skill

Use this skill for any frontend code changes in this repository.

Goals

Keep UI cohesive through CSS variable tokens.
Keep Tailwind v4 as the styling engine.
Support only light/dark themes (plus auto mode resolution).
Prefer token-first implementation before introducing new component libraries.

Rules

Define and update tokens in src/styles.css.
Follow token layers:
- primitive tokens (--sea-ink, --lagoon, etc.)
- semantic tokens (--text-primary, --bg-surface, --border-subtle)
- component tokens (--button-neutral-bg, --auth-avatar-bg)
Never hardcode new hex or rgba values inside className strings when a semantic token can be used.
Prefer reusable recipe classes in src/styles.css for repeated component patterns (.button-neutral, .chip-shell, .icon-button).
Keep inline style usage minimal and only for dynamic runtime values (for example animation delays).
Keep all new tokens parity-mapped in light and dark mode.

Theming Model

Respect existing theme behavior:
- data-theme="light" forces light
- data-theme="dark" forces dark
- no data-theme means auto/system mode
Keep html color-scheme aligned with resolved mode.
Do not add multi-brand or white-label token scopes.

Component Guidance

Prefer semantic token references in component classes:
- text -> --text-*
- backgrounds -> --bg-*
- borders -> --border-*
If a component repeats across pages, introduce a recipe class in src/styles.css instead of duplicating utility strings.

Radix or Ariakit Adoption Path

Introduce Radix/Ariakit only after token model changes are complete for the touched UI.
Wrap primitives with local components that consume existing semantic/component tokens.
Do not ship default library styles as-is; map states and variants to project tokens.

Verification

Run after frontend changes:

vp check
vp test
vp build for larger UI/theming changes

Manual checks:

Theme toggle cycles through light -> dark -> auto.
Key surfaces/controls have visual parity in light and dark.
Desktop and mobile layouts remain usable.

More from this repository

same repository

agent-browser

dejanvasic85/team-manager

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

2026-04-211

Frontend Design System Skill

Use this skill for any frontend code changes in this repository.

Goals

Keep UI cohesive through CSS variable tokens.

Keep Tailwind v4 as the styling engine.

Support only light/dark themes (plus auto mode resolution).

Prefer token-first implementation before introducing new component libraries.

Rules

Define and update tokens in src/styles.css.

Follow token layers:

primitive tokens (--sea-ink, --lagoon, etc.)
semantic tokens (--text-primary, --bg-surface, --border-subtle)
component tokens (--button-neutral-bg, --auth-avatar-bg)

Never hardcode new hex or rgba values inside className strings when a semantic token can be used.

Prefer reusable recipe classes in src/styles.css for repeated component patterns (.button-neutral, .chip-shell, .icon-button).

Keep inline style usage minimal and only for dynamic runtime values (for example animation delays).

Keep all new tokens parity-mapped in light and dark mode.

Theming Model

Respect existing theme behavior:

data-theme="light" forces light
data-theme="dark" forces dark
no data-theme means auto/system mode

Keep html color-scheme aligned with resolved mode.

Do not add multi-brand or white-label token scopes.

Component Guidance

Prefer semantic token references in component classes:

text -> --text-*
backgrounds -> --bg-*
borders -> --border-*

If a component repeats across pages, introduce a recipe class in src/styles.css instead of duplicating utility strings.

Radix or Ariakit Adoption Path

Introduce Radix/Ariakit only after token model changes are complete for the touched UI.

Wrap primitives with local components that consume existing semantic/component tokens.

Do not ship default library styles as-is; map states and variants to project tokens.

Verification

Run after frontend changes:

vp check

vp test

vp build for larger UI/theming changes

Manual checks:

Theme toggle cycles through light -> dark -> auto.

Key surfaces/controls have visual parity in light and dark.

Desktop and mobile layouts remain usable.