Agent skill

Frontend Patterns

by kurealnum in kurealnum/dotfiles

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

No licenceAuto-check passedFrontend & Design

Install Frontend Patterns

skills CLI
$ npx skills add kurealnum/dotfiles --skill frontend-patterns -a claude-code

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

GitHub CLI
$ gh skill install kurealnum/dotfiles frontend-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/kurealnum/dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-patterns .claude/skills/frontend-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-patterns
GitHub stars
290
Used in
19 other repos
Token cost
~3.7k tokens
SKILL.md length
136 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
None found

At a glance

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

  • Tasks that involve State management
  • SKILL.md covers When to Activate, Component Patterns, Custom Hooks Patterns and State Management Patterns, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Frontend development

What it does

Frontend Patterns is an agent skill from kurealnum/dotfiles. Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Its SKILL.md is about 3.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering State management, Frontend development and Performance optimization. It works with Next.js and React.

When your agent uses it

  • Tasks that involve State management
  • Tasks that involve Frontend development
  • Tasks that involve Performance optimization

Example prompts

  • “/frontend-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit bcd8741. 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 (its code samples are typescript).

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

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

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

Without a licence we can't republish the file, so here is its outline and opening line. It has 136 words (~3,687 tokens).

“Modern frontend patterns for React, Next.js, and performant user interfaces.”

— opening of SKILL.md by kurealnum
name
frontend-patterns
origin
ECC

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/frontend-patterns of kurealnum/dotfiles.

Open the folder on GitHubat commit bcd8741

Used in 19 other repositories

We found 37 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 19 other GitHub owners. This page covers the copy in kurealnum/dotfiles, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Frontend 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 Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Patterns this skillkurealnum/dotfiles29019 repos~3.7kAutomated safety check: PassNone
Discover Frontendrand/cc-polymath181—~2.4kAutomated safety check: PassMIT
React ExpertJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT
Frontend Developeraiskillstore/marketplace4307 repos~1.9kAutomated safety check: PassNone
Moai Domain Frontendmodu-ai/moai-adk1.2k—~1.8kAutomated safety check: PassApache-2.0
Moai Ref React Patternsmodu-ai/moai-adk1.2k—~1.8kAutomated safety check: PassApache-2.0

Similar skills

  • Discover Frontend

    rand/cc-polymath

    Automatically discover frontend development skills when working with React, Next.js, UI components, state management, data fetching, forms, accessibility, performance optimization, or SEO.

    181 GitHub stars~2.4k tokensUpdated 7 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 4 days ago
    Frontend & DesignAuto-check passed
  • Frontend Developer

    aiskillstore/marketplace

    Build React components, implement responsive layouts, and handle client-side state management.

    430 GitHub starsUsed in 7 repos~1.9k tokens
    Frontend & DesignAuto-check passed
  • Moai Domain Frontend

    modu-ai/moai-adk

    Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Moai Ref React Patterns

    modu-ai/moai-adk

    React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • 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 kurealnum/dotfiles

All 13 skills in this repo
  • Continuous Learning V2

    kurealnum/dotfiles

    Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents.

    290 GitHub starsUsed in 4 repos~3.1k tokens
    Auto-check passed
  • Coding Standards

    kurealnum/dotfiles

    Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

    290 GitHub starsUsed in 17 repos~2.9k tokens
    Auto-check passed
  • Python Patterns

    kurealnum/dotfiles

    Pythonic idioms, PEP 8 standards, type hints, and best practices for building robust, efficient, and maintainable Python applications.

    290 GitHub starsUsed in 8 repos~4.1k tokens
    Auto-check passed
  • Twitter Algorithm Optimizer

    kurealnum/dotfiles

    Analyze and optimize tweets for maximum reach using Twitter's open-source algorithm insights.

    290 GitHub starsUsed in 8 repos~3.2k tokens
    Auto-check passed
  • DB Migrations

    kurealnum/dotfiles

    A skill your agent uses when generating or regenerating Drizzle migration files, changing database schema tables or columns, resolving migration sequence conflicts after rebase, reviewing migration…

    290 GitHub stars~820 tokensUpdated 5 mo ago
    Auto-check passed
  • Drizzle

    kurealnum/dotfiles

    Drizzle ORM schema and database guide. An agent skill from kurealnum/dotfiles.

    290 GitHub stars~1.3k tokensUpdated 5 mo ago
    Auto-check passed

Works with

Questions about Frontend Patterns

What does Frontend Patterns do?

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Frontend Patterns is an agent skill from kurealnum/dotfiles.js, state management, performance optimization, and UI best practices.

When should I use Frontend Patterns?

Frontend Patterns fits situations like: tasks that involve State management; tasks that involve Frontend development; tasks that involve Performance optimization.

How do I install Frontend Patterns in Claude Code?

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

How do I install Frontend Patterns in Codex?

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

Can I use Frontend 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 kurealnum/dotfiles --skill frontend-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-patterns, .gemini/skills/frontend-patterns, .github/skills/frontend-patterns and .opencode/skills/frontend-patterns in your project.

What does Frontend Patterns need to run?

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

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

No licence was found for Frontend Patterns or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Frontend Patterns use?

About 3.7k tokens (SKILL.md is roughly 15k 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 Patterns?

Skills that share tags, products or a category with Frontend Patterns: Discover Frontend (rand/cc-polymath, 181 stars), React Expert (Jeffallan/claude-skills, 12k stars), Frontend Developer (aiskillstore/marketplace, 430 stars) and Moai Domain Frontend (modu-ai/moai-adk, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Patterns?

kurealnum (a GitHub user) maintains it in kurealnum/dotfiles, which has 290 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on April 13, 2026.

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