How do I install the Frontend UI skill?

Run npx skillmds@latest add tomevault-io/frontend-ui-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend UI?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend UI by tomevault-io — Agent Skill

Name: Frontend UI
Author: tomevault-io

Frontend UI

UI/UX guidelines for app development in this Turborepo (apps/web and future apps). Use when designing or implementing app pages, layouts, navigation, or interactions with Tailwind and @repo/ui components. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

Frontend UI (Apps)

Overview

Design and implement app UI/UX with consistent patterns, accessibility, and performance. Reuse shared components from @repo/ui, keep the landing page lightweight, and follow App Router conventions.

Scope and Boundaries

Apps may import packages; packages must not import apps.
Prefer shared UI in packages/ui to avoid duplication across apps.
App-specific UI belongs under the app (for web: apps/web/src/components).
Import UI components via subpath exports (no barrel imports).

Workflow

Scan existing app layouts/components to preserve established patterns.
Decide whether the UI should be shared (packages/ui) or app-specific.
Build the UI using @repo/ui components and Tailwind utilities.
Add or update local app components using the ~/ path alias.
Validate UX details: hierarchy, spacing, responsive behavior, states, and a11y.
Keep changes minimal and avoid new dependencies unless required; ask first.

UI/UX Guidelines

Layout: establish clear hierarchy with headings and section spacing; keep pages lightweight.
Typography: use the existing Geist Sans/Mono setup unless explicitly asked to change.
Color: rely on the UI theme tokens and CSS variables; avoid ad-hoc palettes.
States: include hover/focus/active/disabled plus empty, loading, and error states.
Responsiveness: design mobile-first and avoid horizontal scroll.
Motion: use subtle, purposeful motion only when it improves clarity.

Implementation Rules

App Router only: routes live in apps/web/src/app (use page.tsx and layout.tsx).
Use ~/ for local imports (e.g., ~/components/...).
Do not duplicate global CSS imports already defined in apps/web/src/app/globals.css.

Accessibility and Semantics

Use semantic elements (header, nav, main, footer) and proper heading order.
Ensure keyboard access and visible focus states.
Use buttons for actions and links for navigation.
Provide labels or ARIA attributes where needed.

Client Component Guidance

Default to Server Components in apps.
Add "use client" only when needed (hooks, browser APIs, event handlers).
Isolate client components to the smallest subtree.

Output Format (PR-ready)

Follow the repo response format: Plan, Edits, Review Notes, Validation.
In Review Notes, include a PR summary (what/why), risks, and follow-ups.

Validation Commands

pnpm --filter web lint
pnpm --filter web typecheck
pnpm --filter web build
pnpm --filter web format
Use repo-wide pnpm lint / pnpm typecheck when required.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: frontend-ui-2description: UI/UX guidelines for app development in this Turborepo (apps/web and future apps). Use when designing or implementing app pages, layouts, navigation, or interactions with Tailwind and @repo/ui components. Use when this capability is needed.---# Frontend UI (Apps)## OverviewDesign and implement app UI/UX with consistent patterns, accessibility, and performance. Reuse shared components from `@repo/ui`, keep the landing page lightweight, and follow App Router conventions.## Scope and Boundaries- Apps may import packages; packages must not import apps.- Prefer shared UI in `packages/ui` to avoid duplication across apps.- App-specific UI belongs under the app (for web: `apps/web/src/components`).- Import UI components via subpath exports (no barrel imports).## Workflow1. Scan existing app layouts/components to preserve established patterns.2. Decide whether the UI should be shared (packages/ui) or app-specific.3. Build the UI using `@repo/ui` components and Tailwind utilities.4. Add or update local app components using the `~/` path alias.5. Validate UX details: hierarchy, spacing, responsive behavior, states, and a11y.6. Keep changes minimal and avoid new dependencies unless required; ask first.## UI/UX Guidelines- Layout: establish clear hierarchy with headings and section spacing; keep pages lightweight.- Typography: use the existing Geist Sans/Mono setup unless explicitly asked to change.- Color: rely on the UI theme tokens and CSS variables; avoid ad-hoc palettes.- States: include hover/focus/active/disabled plus empty, loading, and error states.- Responsiveness: design mobile-first and avoid horizontal scroll.- Motion: use subtle, purposeful motion only when it improves clarity.## Implementation Rules- App Router only: routes live in `apps/web/src/app` (use `page.tsx` and `layout.tsx`).- Use `~/` for local imports (e.g., `~/components/...`).- Do not duplicate global CSS imports already defined in `apps/web/src/app/globals.css`.## Accessibility and Semantics- Use semantic elements (`header`, `nav`, `main`, `footer`) and proper heading order.- Ensure keyboard access and visible focus states.- Use buttons for actions and links for navigation.- Provide labels or ARIA attributes where needed.## Client Component Guidance- Default to Server Components in apps.- Add `"use client"` only when needed (hooks, browser APIs, event handlers).- Isolate client components to the smallest subtree.## Output Format (PR-ready)- Follow the repo response format: Plan, Edits, Review Notes, Validation.- In Review Notes, include a PR summary (what/why), risks, and follow-ups.## Validation Commands- `pnpm --filter web lint`- `pnpm --filter web typecheck`- `pnpm --filter web build`- `pnpm --filter web format`- Use repo-wide `pnpm lint` / `pnpm typecheck` when required.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/valuecodes) — claim your Tome and manage your conversions.

Frequently asked questions