New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend UI Functional

by victorGPT in victorGPT/vibeusage

A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…

MITAuto-check passedFrontend & Design

Install Frontend UI Functional

skills CLI
$ npx skills add victorGPT/vibeusage --skill frontend-ui-functional -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install victorGPT/vibeusage frontend-ui-functional --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/victorGPT/vibeusage.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/public/frontend-ui-functional .claude/skills/frontend-ui-functional && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-ui-functional
GitHub stars
131
Token cost
~939 tokens
SKILL.md length
230 words
Files
12 (incl. references, assets)
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…

  • Works in 6 steps: Project overlay check →… → Structure first →… → Apply styling tokens →… → …
  • Refactoring functional React/Vite/Tailwind UI pages
  • SKILL.md covers Overview, Project Overlay (Required), When to Use and When Not to Use, plus 5 more sections
  • Runs TypeScript scripts from its folder

What it does

Frontend UI Functional is an agent skill from victorGPT/vibeusage. Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.

Its SKILL.md is about 940 tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including reference files and assets (for example `assets/snippets/zustand-store.ts`, `references/a11y-checklist.md` and `references/atomic-design.md`).

It sits in Frontend & Design, covering Frontend development, CSS and styling and Accessibility. It works with React, Tailwind CSS and Vite. The licence is MIT.

When your agent uses it

  • Refactoring functional React/Vite/Tailwind UI pages
  • Component libraries that need consistent structure
  • Tokenized styling
  • Accessibility checks

Example prompts

  • “/frontend-ui-functional”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Project overlay check → docs/skills/frontend-ui-functional/project-overlay.md (if present)
  2. Structure first → references/atomic-design.md
  3. Apply styling tokens → references/styling-tokens.md
  4. A11y pass → references/a11y-checklist.md
  5. Performance + state pass → references/perf-and-state.md
  6. Tooling + QA → references/tooling.md

What it can do on your machine

Read from SKILL.md and the folder at commit 4891a58. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (TypeScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend UI Functional loads about 939 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 59 tokens; SKILL.md has 230 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~59
When it runs · the whole SKILL.md, loaded when a task matches
~939
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from victorGPT/vibeusage at commit 4891a58, republished under its MIT licence (© victorGPT). 230 words, ~939 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-ui-functional/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.
name
frontend-ui-functional
description
Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.

Frontend UI Functional

Overview

Provide a lightweight, repeatable workflow for functional React/Vite/Tailwind UI using structure, tokens, accessibility, and performance-ready patterns plus reusable snippets.

Project Overlay (Required)

If the repo contains docs/skills/frontend-ui-functional/project-overlay.md, read and apply it before starting. Project-specific rules override this skill.

When to Use

  • Building new UI pages, templates, or component libraries in React/Vite/Tailwind.
  • Standardizing layout, token usage, a11y/accessibility, and performance practices across UI.
  • Shipping functional UI quickly without skipping baseline a11y/perf checks.

When Not to Use

  • Pure copywriting/content strategy tasks.
  • Non-React or non-Tailwind stacks.
  • Deep visual branding exploration (use the frontend-design skill).

Workflow (Minimum Pass)

  1. Project overlay check → docs/skills/frontend-ui-functional/project-overlay.md (if present)
  2. Structure first → references/atomic-design.md
  3. Apply styling tokens → references/styling-tokens.md
  4. A11y pass → references/a11y-checklist.md
  5. Performance + state pass → references/perf-and-state.md
  6. Tooling + QA → references/tooling.md

If time is tight, do a thin pass of each step rather than skipping a11y/perf.

Quick Reference

NeedUse
Project overlaydocs/skills/frontend-ui-functional/project-overlay.md (if present)
Structure systemreferences/atomic-design.md
Tokenized stylingreferences/styling-tokens.md
Accessibility/a11yreferences/a11y-checklist.md
Performance + statereferences/perf-and-state.md
QA toolingreferences/tooling.md
Reusable UI snippetsassets/snippets/*

Reusable Snippets

  • Button: assets/snippets/button.tsx
  • Card: assets/snippets/card.tsx
  • Form: assets/snippets/form.tsx
  • Layout: assets/snippets/layout.tsx
  • Lazy Route Boundary: assets/snippets/lazy-route.tsx
  • Zustand Store: assets/snippets/zustand-store.ts

Example (Single)

Note: replace literal strings with your project's copy/content source when applicable.

tsx
import { Button } from "./button";
import { Card } from "./card";
import { PageLayout } from "./layout";

export function DashboardStub() {
  return (
    <PageLayout title="Overview" actions={<Button label="Create" />}>
      <div className="grid gap-4 md:grid-cols-2">
        <Card title="Revenue" description="Last 30 days">
          <div className="text-2xl font-semibold text-primary">$128,400</div>
        </Card>
        <Card title="Active Users" description="Daily active">
          <div className="text-2xl font-semibold text-primary">4,812</div>
        </Card>
      </div>
    </PageLayout>
  );
}

Common Mistakes

  • Skipping a11y/perf due to time pressure; do the minimum pass instead.
  • Hardcoding colors instead of using tokens from references/styling-tokens.md.
  • Mixing layout decisions with visual polish before the structure is stable.

© victorGPT, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 11 other files (references, assets) in skills/public/frontend-ui-functional of victorGPT/vibeusage.

  • SKILL.md
  • assets/snippets/button.tsx
  • assets/snippets/card.tsx
  • assets/snippets/form.tsx
  • assets/snippets/layout.tsx
  • assets/snippets/lazy-route.tsx
  • assets/snippets/zustand-store.ts
  • references/a11y-checklist.md
  • references/atomic-design.md
  • references/perf-and-state.md
  • references/styling-tokens.md
  • references/tooling.md

Open the folder on GitHubat commit 4891a58

Compare with similar skills

Frontend UI Functional next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend UI Functional compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend UI Functional this skillvictorGPT/vibeusage131—~939Automated safety check: PassMIT
Chakra UI v3 Refactor and Reviewchakra-ui/chakra-ui41k—~2.8kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Tailwind V4 Shadcnever-works/ever-works1582 repos~3.8kAutomated safety check: PassMIT
Bryl Minimal Designbryllim/bryl-minimal-design114—~2.9kAutomated safety check: PassMIT

Similar skills

  • Chakra UI v3 Refactor and Review

    chakra-ui/chakra-ui

    Reviews and converts UI code to Chakra UI v3, producing a critique, rewritten code or both, from plain HTML, Tailwind, CSS Modules or styled-components.

    41k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 8 days ago
    Frontend & DesignAuto-check: notes

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    158 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Bryl Minimal Design

    bryllim/bryl-minimal-design

    Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…

    114 GitHub stars~2.9k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Frontend UI Foundry

    jiushiwon/wg-skills

    A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…

    110 GitHub stars~1.4k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from victorGPT/vibeusage

  • Backend Mvp Guardrails

    victorGPT/vibeusage

    A skill your agent uses when designing or reviewing a backend MVP with tight budget, evolving schema, and reliance on third-party backends where idempotency, replay, and responsibility attribution…

    131 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Codex PR Review Loop

    victorGPT/vibeusage

    A skill your agent uses when managing Codex review iterations for a PR and you must enforce preflight risk-layer checks and post-merge learning capture.

    131 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • PR Review Cycle Retro

    victorGPT/vibeusage

    A skill your agent uses when a team sees repeated @codex review cycles or Codex Cloud feedback churn and needs root-cause attribution by development stage.

    131 GitHub stars~1.4k tokensUpdated 2 mo ago
    Auto-check passed

  • Vibeusage Design

    victorGPT/vibeusage

    A skill your agent uses to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc.

    131 GitHub stars~566 tokensUpdated 2 mo ago
    Auto-check passed

  • Vibeusage Agent Readiness

    victorGPT/vibeusage

    Use VibeUsage to track AI coding agent token usage, inspect model and project usage, and find scoped API documentation.

    131 GitHub stars~252 tokensUpdated 2 mo ago
    Auto-check passed

Works with

Categories

Questions about Frontend UI Functional

What does Frontend UI Functional do?

A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…. Frontend UI Functional is an agent skill from victorGPT/vibeusage. Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.

When should I use Frontend UI Functional?

Frontend UI Functional fits situations like: refactoring functional React/Vite/Tailwind UI pages; component libraries that need consistent structure; tokenized styling; accessibility checks.

How do I install Frontend UI Functional in Claude Code?

Run `npx skills add victorGPT/vibeusage --skill frontend-ui-functional -a claude-code`. Or copy the skill folder (skills/public/frontend-ui-functional in victorGPT/vibeusage) into .claude/skills/frontend-ui-functional in your project. Claude Code loads it when a task matches its description.

How do I install Frontend UI Functional in Codex?

Run `npx skills add victorGPT/vibeusage --skill frontend-ui-functional -a codex`. Or copy the skill folder (skills/public/frontend-ui-functional in victorGPT/vibeusage) into .agents/skills/frontend-ui-functional in your project. Codex loads it when a task matches its description.

Can I use Frontend UI Functional in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add victorGPT/vibeusage --skill frontend-ui-functional -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-ui-functional, .gemini/skills/frontend-ui-functional, .github/skills/frontend-ui-functional and .opencode/skills/frontend-ui-functional in your project.

What does Frontend UI Functional need to run?

Going by SKILL.md and its folder, Frontend UI Functional needs TypeScript for the scripts in its folder. Our summary lists: Node.js.

Does Frontend UI Functional access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend UI Functional safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend UI Functional use?

Frontend UI Functional is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend UI Functional use?

About 939 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 842 tokens, read only when the agent opens those files.

What are the alternatives to Frontend UI Functional?

Skills that share tags, products or a category with Frontend UI Functional: Chakra UI v3 Refactor and Review (chakra-ui/chakra-ui, 41k stars), Design Style (Castor6/tactus, 376 stars), Extract Design (Manavarya09/design-extract, 4.2k stars) and Tailwind V4 Shadcn (ever-works/ever-works, 158 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend UI Functional?

victorGPT (a GitHub user) maintains it in victorGPT/vibeusage, which has 131 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on July 31, 2026.

Source: victorGPT/vibeusage on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.