New: 98,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 Patterns

by biersoeckli in biersoeckli/QuickStack

Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions.

GPL-3.0Auto-check passedFrontend & Design

Install Frontend UI Patterns

skills CLI
$ npx skills add biersoeckli/QuickStack --skill frontend-ui-patterns -a claude-code

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

GitHub CLI
$ gh skill install biersoeckli/QuickStack frontend-ui-patterns --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/biersoeckli/QuickStack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-ui-patterns .claude/skills/frontend-ui-patterns && 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-patterns
GitHub stars
362
Token cost
~704 tokens
SKILL.md length
297 words
Files
2
Skills in repo
4
Repo updated
First seen
Licence
GPL-3.0

At a glance

Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions.

  • Editing frontend files
  • SKILL.md covers Quick Start, Core Workflow, Boundary Rules and Forms And Actions, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Shadcn/ui composition

What it does

Frontend UI Patterns is an agent skill from biersoeckli/QuickStack. Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions. Use when editing frontend files, shadcn/ui composition, react-hook-form + Zod flows, Server Action consumption from client components, or client/server component boundaries.

Its SKILL.md is about 700 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `REFERENCE.md`).

It sits in Frontend & Design, covering React components, Frontend development and Forms and validation. It works with shadcn/ui, Zod and Zustand. The repository describes itself as: Open-source, self-hostable alternative to Vercel, Netlify, Railway and Heroku. Self-host any app on your own servers in minutes. The licence is GPL-3.0.

When your agent uses it

  • Editing frontend files
  • Shadcn/ui composition
  • React-hook-form + Zod flows
  • Server Action consumption from client components

Example prompts

  • “/frontend-ui-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit 67dc6bd. 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

    No scripts in the folder and no shell commands in SKILL.md.

    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 Patterns loads about 704 tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 297 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~92
When it runs · the whole SKILL.md, loaded when a task matches
~704

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 biersoeckli/QuickStack at commit 67dc6bd, republished under its GPL-3.0 licence (© biersoeckli). 297 words, ~704 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-ui-patterns/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
frontend-ui-patterns
description
Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions. Use when editing frontend files, shadcn/ui composition, react-hook-form + Zod flows, Server Action consumption from client components, or client/server component boundaries.

Frontend UI Patterns

Quick Start

For QuickStack frontend work:

  • Use kebab-case filenames.
  • Put shadcn/ui primitives in src/components/ui/.
  • Put composed UI in src/components/custom/.
  • Put frontend hooks, helpers, sockets, and Zustand usage in src/frontend/.
  • Co-locate page-specific Server Actions in actions.ts beside the consuming page.

Core Workflow

When creating or updating frontend UI:

  • Decide the boundary first: server pages fetch data and check auth; client components handle interaction.
  • Build forms with react-hook-form, Zod, shadcn Form, and shared field wrappers.
  • Choose the Server Action flow by UI need: Toast.fromAction() for immediate feedback, Actions.run() for imperatively loaded data, and useActionState plus FormUtils.mapValidationErrorsToForm() for forms with field errors.
  • Use Zustand-backed dialogs and stores for reusable or cross-component flows; use local state for page-owned dialogs.
  • Use SimpleDataTable for standard tables before building custom table behavior.
  • Style with shadcn/ui plus Tailwind utilities and cn().

Boundary Rules

  • Use 'use server' for pages and layouts that fetch data or gate authorization.
  • Use 'use client' for dialogs, forms, tables, event handlers, and streaming UI.
  • Use auth helpers from action-wrapper.utils.ts in server components.

Forms And Actions

  • Add route-safe validation with shared or local Zod schemas.
  • With Zod 4 and zodResolver, type every form with the schema's input and output types. Import z from "zod" and use useForm<z.input<typeof schema>, unknown, z.output<typeof schema>>({ resolver: zodResolver(schema), ... }). Do not use z.infer as the useForm field-values type when the schema has coercion, transforms, preprocessors, or defaults.
  • Map server validation errors back with FormUtils.mapValidationErrorsToForm(...).
  • Use SubmitButton for form submits when possible.

State, Dialogs, And Streaming

  • Reuse stores in src/frontend/states/zustand.states.ts before adding new ones.
  • Use useDialog, useConfirmDialog, and useInputDialog for modal flows.
  • Clean up SSE and socket work with AbortController or equivalent effect cleanup.

Reference

See REFERENCE.md for concrete examples covering server/client boundaries, auth helpers, forms, Server Actions, Zustand stores, SimpleDataTable, dialogs, styling, and real-time UI.

© biersoeckli, GPL-3.0. 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 1 other file in .agents/skills/frontend-ui-patterns of biersoeckli/QuickStack.

  • SKILL.md
  • REFERENCE.md

Open the folder on GitHubat commit 67dc6bd

Compare with similar skills

Frontend UI Patterns 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 Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend UI Patterns this skillbiersoeckli/QuickStack362—~704Automated safety check: PassGPL-3.0
Opik Frontend Patternscomet-ml/opik22k—~1.1kAutomated safety check: PassApache-2.0
Buzzformbuildnbuzz/buzzform101—~1.5kAutomated safety check: PassMIT
Frontend Patterns Templatebybren-llc/safe-agentic-workflow421—~2kAutomated safety check: PassMIT
React ExpertJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT
Shadcn UIjh941213/my-cc-harness1264 repos~9.7kAutomated safety check: NotesMIT

Similar skills

  • Opik Frontend Patterns

    comet-ml/opik

    Sets the conventions for the Opik React frontend: TanStack Query for data, Zustand for shared state, one-way layer imports and a fix for Google Translate crashes.

    22k GitHub stars~1.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Buzzform

    buildnbuzz/buzzform

    A skill your agent uses when working with BuzzForm schema-driven forms, @buildnbuzz/form-core, @buildnbuzz/form-react, or any related APIs like defineSchema, InferType, FormProvider, useDataField…

    101 GitHub stars~1.5k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Patterns Template

    bybren-llc/safe-agentic-workflow

    Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing…

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

  • React Expert

    Jeffallan/claude-skills

    Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.

    12k GitHub stars~1.4k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Shadcn UI

    jh941213/my-cc-harness

    Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components.

    126 GitHub starsUsed in 4 repos~9.7k tokens
    Frontend & DesignAuto-check: notes

  • Frontend Development

    avibebuilder/claude-prime

    A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer.

    120 GitHub stars~1.3k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

More from biersoeckli/QuickStack

  • Elysia API Routes

    biersoeckli/QuickStack

    Create and update QuickStack Elysia REST API routes using the project's established /api/v1 route conventions.

    362 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Backend Services

    biersoeckli/QuickStack

    Create and update QuickStack backend services, adapters, standalone services, and server actions using the project's established singleton, adapter, caching, and error-handling patterns.

    362 GitHub stars~552 tokensUpdated yesterday
    Auto-check passed

  • Backend Testing

    biersoeckli/QuickStack

    Create and review QuickStack backend unit and integration tests using the project's Vitest, Prisma, SQLite, and k3s conventions.

    362 GitHub stars~670 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Frontend UI Patterns

What does Frontend UI Patterns do?

Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions. Frontend UI Patterns is an agent skill from biersoeckli/QuickStack. Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions.

When should I use Frontend UI Patterns?

Frontend UI Patterns fits situations like: editing frontend files; shadcn/ui composition; React-hook-form + Zod flows; server Action consumption from client components.

How do I install Frontend UI Patterns in Claude Code?

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

How do I install Frontend UI Patterns in Codex?

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

Can I use Frontend UI Patterns 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 biersoeckli/QuickStack --skill frontend-ui-patterns -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-patterns, .gemini/skills/frontend-ui-patterns, .github/skills/frontend-ui-patterns and .opencode/skills/frontend-ui-patterns in your project.

What does Frontend UI Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend UI Patterns is instructions for the agent only.

Does Frontend UI Patterns 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 Patterns 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 Patterns use?

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

How many tokens does Frontend UI Patterns use?

About 704 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend UI Patterns?

Skills that share tags, products or a category with Frontend UI Patterns: Opik Frontend Patterns (comet-ml/opik, 22k stars), Buzzform (buildnbuzz/buzzform, 101 stars), Frontend Patterns Template (bybren-llc/safe-agentic-workflow, 421 stars) and React Expert (Jeffallan/claude-skills, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend UI Patterns?

biersoeckli (a GitHub user) maintains it in biersoeckli/QuickStack, which has 362 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 7, 2026.

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