Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

Começar

frontend-design-system

Estrelas1

Forks0

Atualizado21 de abril de 2026 às 07:22

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

dejanvasic85

dejanvasic85/team-manager

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·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.

Mais deste repositório

mesmo repositório

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.