Skip to main content
affpapa.org
RU EN
skill CX Codex

front-end-developer — Claude Code skill for React and Next.js work

Turns your agent into a senior front-end developer: React, Next.js, TypeScript, Tailwind, accessibility. Useful when you want components written, not discussed.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Mindrally/skills --skill front-end-developer -a claude-code
Open on GitHub

What front-end-developer does

The skill gives the agent a Senior Front-End Developer role with ReactJS, NextJS, JavaScript, TypeScript, HTML and CSS, plus the TailwindCSS, Shadcn and Radix UI frameworks. Answers come with reasoning, step by step.

The workflow is explicit: describe the plan in detailed pseudocode first, confirm the approach, then write code. Styling is Tailwind classes only, no CSS tags. Inside class attributes it prefers class: over ternaries, event handlers get a handle prefix, and arrow functions are declared with const and type definitions. Accessibility is part of the brief: tabindex, aria-labels, keyboard handlers.

There is one SKILL.md file with instructions. No scripts, no extra packages. Code is expected to be finished, with no todos, placeholders or missing imports, and readability outranks performance. One catch: the Tailwind-only rule means that in a project styled with CSS modules or styled-components the agent will keep reaching for Tailwind classes. Worth checking how your UI is styled before you install.

What it helps with

  • write React components from pseudocode through to finished code
  • keep styling in Tailwind classes instead of CSS tags
  • add accessibility with aria attributes and keyboard handlers
  • get complete code with no todos or missing imports
  • prefer early returns and descriptive names over nested conditions

Example prompts for the agent

  • Write a product card component in React with types and Tailwind classes
  • Outline a Next.js login form in pseudocode first, then implement it
  • Refactor this component: early returns, handle-prefixed handlers, aria-labels

How to install front-end-developer

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill front-end-developer -a claude-code

2Manually: put the files in place

~/.claude/skills/front-end-developer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/front-end-developer/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about front-end-developer

How do I install front-end-developer in Claude?

Run npx skills add Mindrally/skills --skill front-end-developer -a claude-code. The skill lands in ~/.claude/skills/front-end-developer/SKILL.md.

What does the front-end-developer skill do?

It sets a senior front-end developer role and working rules: pseudocode plan before code, Tailwind for styling, accessibility, finished code with no placeholders.

Does it need any dependencies?

No, it is a single SKILL.md file with instructions. The Tailwind rule does assume a project where the UI is styled with Tailwind classes.

Source text

SKILL.md · Apache-2.0 
---
name: front-end-developer
description: Senior Front-End Developer expertise in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Front-End Developer

You are a Senior Front-End Developer with expertise in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks (TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. Provide accurate, factual answers with careful reasoning.

## Development Workflow

- Follow user requirements precisely
- Think step-by-step; describe implementation plans in detailed pseudocode before coding
- Confirm approach, then write code
- Ensure correct, best-practice, DRY principle code that's bug-free and fully functional
- Prioritize readability over performance

## Code Quality Standards

- Leave NO todo's, placeholders or missing pieces
- Verify code is thoroughly finalized and complete
- Include all required imports with proper component naming
- Minimize extraneous prose

## Implementation Guidelines

- Use early returns for readability
- Apply Tailwind classes exclusively for styling; avoid CSS tags
- Prefer "class:" over ternary operators in class attributes
- Use descriptive names; prefix event handlers with "handle" (e.g., `handleClick`)
- Implement accessibility: tabindex, aria-labels, keyboard handlers
- Use const arrow functions with type definitions

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Frontend and UI →
AEM Front-End Specialist official github Builds Adobe Experience Manager components using HTL and Tailwind CSS v4, extracting design tokens directly from Figma. ★ 40,418repo stars frontend-developer sickn33 Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. Use it when building pages or fixing UI issues. CX Codex +1 1,300installs nextjs-developer https://github.com/Jeffallan Configures Next.js 14+ application architecture using App Router, React Server Components, and Server Actions. Useful when setting up SSR streaming, SEO metadata, and Vercel deployments. CX Codex +1 5,800installs bencium-code-conventions bencium Sets Bence's conventions for React and Next.js projects, covering the stack, code style, tests and workflow. Use it when building or setting up work under those rules. CX Codex +1 3,300installs data-viz-2025 curiositech A skill for React, Next.js and TypeScript projects: helps build interactive charts, dashboards and data stories with Tailwind CSS. CX Codex +1 304installs typescript-nodejs-nextjs-react-ui-css-cursorrules- PatrickJS A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,011repo stars

From the same set214

data-analysis-jupyter Guides AI coding agents through data analysis, visualization, and Jupyter notebook workflows with pandas, numpy, matplotlib, and seaborn. CX Codex +1 1,500installs express-typescript Rules that steer your agent when it writes Express.js and TypeScript APIs: project layout, middleware, validation, security. CX Codex +1 1,400installs react-query Tells the agent how to fetch and cache server data in React: queries, mutations, invalidation and optimistic updates. CX Codex +1 1,400installs redux-toolkit Redux Toolkit best practices for React and Next.js applications using TypeScript. Helps structure feature slices, typed hooks, and RTK Query endpoints. CX Codex +1 1,300installs lua Gives the agent a rulebook for Lua: tables, metatables, error handling, game loops and memory. Useful when your project is Lua or Love2D. CX Codex +1 1,300installs tauri-development The skill provides guidelines for building desktop applications with Tauri. It sets coding standards across Rust and TypeScript. CX Codex +1 1,300installs nextjs-typescript-tailwindcss-supabase A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code. CX Codex +1 1,300installs electron-development A skill that gives the agent rules for building Electron desktop apps: process separation, IPC, window security. CX Codex +1 1,300installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor