ai-dev-skills

A collection of AI skills for software development. Each skill is a focused instruction set that primes any AI tool to perform a specific engineering task with the right mental model, rules, and output format — like loading a senior specialist's mindset into the AI before it starts working.

Compatible with Cursor, Claude Code, GitHub Copilot Chat, Codex, and any AI tool that accepts a system prompt or context file.

Getting Started

Step 1 — Install the CLI globally (once)

npm install -g ai-dev-skills

Step 2 — Go to the project where you want to use the skills

cd my-project

Step 3 — Install the skills for your AI tool

# Claude Code (creates /skill-name slash commands)
ai-skill install --all --tool claude

# Cursor (creates rules in .cursor/rules/)
ai-skill install --all --tool cursor

# Codex CLI (appends to AGENTS.md)
ai-skill install --all --tool codex

# All tools at once
ai-skill install --all --tool all

Step 4 — Use the skill in your AI tool

# Claude Code — type in chat:
/react-screen-refactor
Refactor this screen: [paste your code]

# Cursor — attach the rule in chat and type:
Refactor this screen: [paste your code]

# Codex — just run it, AGENTS.md is read automatically

Repeat Steps 2–3 for each project. The CLI is global; the skill files are per-project.

CLI Commands

ai-skill list                              # list all available skills
ai-skill show <skill-name>                 # print skill content to stdout
ai-skill copy <skill-name>                 # copy skill content to clipboard
ai-skill install <skill-name> --tool <t>   # install skill for an AI tool
ai-skill install --all --tool <tool>       # install all skills for an AI tool
ai-skill help                              # show help

--tool options

| Tool | Command installed | Where | |---|---|---| | claude | /<skill-name> slash command | .claude/commands/<skill>.md | | cursor | Attach rule in Cursor chat | .cursor/rules/<skill>.mdc | | codex | Auto-read by Codex CLI | AGENTS.md | | all | All of the above | All locations |

How to Use a Skill

Claude Code — slash commands

Install once per project, then trigger with /skill-name:

# install a single skill
ai-skill install react-screen-refactor --tool claude

# install all skills at once
ai-skill install --all --tool claude

This creates .claude/commands/react-screen-refactor.md. In Claude Code, type:

/react-screen-refactor

Refactor this screen: [paste your code]

Cursor — rules

# install a single skill
ai-skill install flutter-screen-builder --tool cursor

# install all skills
ai-skill install --all --tool cursor

This creates .cursor/rules/<skill>.mdc. In Cursor chat, click Add context → Rules and select the skill, or reference it with @skill-name.

Codex CLI

# install a single skill
ai-skill install backend-clean-architecture --tool codex

# install all skills
ai-skill install --all --tool codex

This appends the skill as a section in AGENTS.md. Codex reads this file automatically on every run.

Install for all tools at once

ai-skill install --all --tool all

Creates the files for Claude Code, Cursor, and Codex simultaneously.

Any AI Chat (ChatGPT, Claude, Gemini, etc.)

ai-skill copy security-review
# then paste into the chat before your request

Pipe into any tool

ai-skill show api-code-review > /tmp/skill.md
cat /tmp/skill.md my-controller.ts | your-ai-tool

Skills

Frontend — React

react-project-builder

What it does: Builds a complete React frontend application from scratch — from product brief to production-ready code. Acts as a senior product team delivering a full MVP-ready codebase.

When to use: Starting a new React project, SaaS product, or dashboard. Use it before writing a single component.

What you get:

• Product brief with stated assumptions
• Information architecture (routes, navigation, auth strategy)
• Complete design system (tokens, typography, colors, spacing)
• Full project folder structure
• Core component library (Button, Input, Badge, Card, Modal, EmptyState, Skeleton...)
• App layout with navigation and auth guard
• All required screens with loading/error/empty/success states
• API layer with React Query hooks
• Router with code splitting
• Accessibility audit summary
• Next steps toward a shippable MVP

Example prompts:

Use the react-project-builder skill.

Product: Faturly
Objective: SaaS for freelancers to create and manage invoices
Target users: Independent contractors and small agencies
Core features: Create invoice, list invoices, mark as paid, PDF export, client management
Visual style: Clean, minimal, Stripe-inspired
Stack: React + TypeScript + Vite + TailwindCSS
Required screens: Dashboard, Invoices list, Invoice detail, New invoice form, Client list, Settings

Use the react-project-builder skill.

Build a project management tool similar to Linear.
Users are software engineering teams.
Core features: project boards, task cards with status, sprint view, team members.
Assume professional decisions for anything not specified.

react-screen-refactor

What it does: Takes an existing React component or screen and performs a complete refactor — deep UX analysis, visual redesign, component decomposition, accessibility fixes, and performance improvements. The result looks like it was built by a senior product team at Stripe or Vercel.

When to use: When a screen feels off, looks generic, has poor UX, is hard to maintain, or was built quickly without design thinking.

What you get:

• Critical diagnosis of the current interface (UX, UI, technical problems)
• UX diagnosis: what causes friction and drop-off
• Applied UX and visual strategy
• New component architecture with file structure
• Complete refactored React code
• Reusable components with TypeScript interfaces
• Accessibility improvements with WCAG references
• Visual performance improvements
• Responsiveness fixes
• Future suggestions

Example prompts:

Use the react-screen-refactor skill.

Here is my current checkout page component:
[paste your component code]

Context: This is the final step before payment in our e-commerce flow.
Main user pain point: Users are dropping off before completing the purchase.
Business rule: We must show order summary, shipping address, and payment method.

Use the react-screen-refactor skill.

Refactor this settings page. It feels cluttered and hard to navigate.
Users are reporting they can't find the billing section.
[paste component]

Frontend — Flutter

flutter-screen-builder

What it does: Creates a Flutter screen from scratch with full UX strategy, premium Material 3 UI, complete state handling, proper component decomposition, accessibility, and micro-interactions. Acts as a senior Flutter product team building for App Store release.

When to use: Adding a new screen to a Flutter app. Use before writing a single widget.

What you get:

• UX strategy (objective, primary action, visual hierarchy, friction points)
• Visual structure description
• Component breakdown with file paths
• Complete Flutter code with extracted widgets
• All states: loading (shimmer), error, empty, success
• Micro-interactions and animations
• Dark mode support
• Accessibility with Semantics widgets
• UX improvement suggestions

Example prompts:

Use the flutter-screen-builder skill.

Screen: Order Tracking
Objective: User wants to see the real-time status of their delivery
Primary user: Mobile shopper who just placed an order
States needed: in transit, out for delivery, delivered, delayed
The app uses Riverpod and Go Router.

Use the flutter-screen-builder skill.

Create an onboarding flow with 3 steps:
1. Welcome + value proposition
2. Choose user type (individual / business)
3. Set up profile photo and name
The app targets young professionals. Visual style: modern, minimal, premium.

flutter-screen-refactor

What it does: Analyzes an existing Flutter screen and performs a deep refactor focused on UX improvement, premium UI redesign, widget decomposition, accessibility, and code quality. Delivers Stripe/Airbnb-level results.

When to use: When a Flutter screen looks outdated, has UX problems, contains giant build() methods, or needs a quality upgrade before shipping.

What you get:

• Complete diagnosis (UX, visual, accessibility, code problems)
• UX diagnosis: friction points and improvement strategy
• New visual hierarchy and user flow
• Complete refactored Flutter code
• Extracted reusable widgets with file paths
• Accessibility improvements
• Visual performance improvements
• Future suggestions

Example prompts:

Use the flutter-screen-refactor skill.

Screen to refactor: ProfilePage
[paste your current Flutter code]

Context: Users edit their profile info, upload a photo, and manage notification preferences.
Problem: The screen feels cluttered and visually inconsistent with the rest of the app.

Use the flutter-screen-refactor skill.

Refactor my home screen. It's showing a list of products but feels slow and looks generic.
The app uses Riverpod. Here is the current code:
[paste code]

Backend

backend-clean-architecture

What it does: Creates, reviews, or improves C#/.NET backend projects using Clean Architecture. Enforces strict layer separation, Use Case pattern, Dapper-first persistence, testable code, and modern .NET 8+ practices.

When to use: Starting a new .NET backend, reviewing existing architecture, adding a new feature while maintaining clean layer separation.

What you get:

• Full project folder structure (Api, Application, Domain, Infrastructure, Tests)
• Layer responsibility enforcement
• Use Case implementation with Command + Result + Validator
• Repository interfaces in Application, implementations in Infrastructure
• Dependency injection registration
• Architecture test examples
• How to test guide
• Future improvements and points of attention

Example prompts:

Use the backend-clean-architecture skill.

Create a Use Case to register a new customer.
Rules:
- Email must be unique
- Name is required, max 100 characters
- After registration, send a welcome email (async, via queue)
- Return the new customer ID and name

Use Dapper + PostgreSQL. Project name: Faturly.

Use the backend-clean-architecture skill.

Review this service class and tell me what violates the architecture rules:
[paste your class]

Use the backend-clean-architecture skill.

Create the full structure for a new domain: Invoices.
Features: create invoice, list by customer, mark as paid, soft delete.

api-code-review

What it does: Reviews REST or GraphQL API code with senior-level depth: contract design, status code correctness, authentication, authorization, performance, and consistency. Produces a structured report with severity levels and actionable fixes.

When to use: Before merging an API PR, after implementing new endpoints, or auditing an existing API for quality.

What you get:

• Contract review (URL naming, HTTP methods, versioning)
• Status code audit
• Security review (auth, authorization, BOLA/IDOR, input validation)
• Performance review (N+1, pagination, indexes)
• Error handling consistency check
• Structured findings: [SEVERITY] Category — Description + File + Evidence + Fix
• Summary with verdict: APPROVE or REQUEST CHANGES

Example prompts:

Use the api-code-review skill.

Review these endpoints for correctness, security, and consistency:
[paste your controller or endpoint code]

Use the api-code-review skill.

Focus specifically on authorization. I want to make sure no user can access
another user's data. Here are all the endpoints for the Orders module:
[paste code]

database-design

What it does: Designs production-grade relational schemas: normalized tables, proper constraints, index strategy, and reversible migrations. Uses PostgreSQL best practices including UUID PKs, soft deletes, updated_at triggers, and zero-downtime column additions.

When to use: Designing a new schema, adding tables to an existing database, reviewing migrations, or optimizing slow queries.

What you get:

• Entity-relationship description
• Full CREATE TABLE statements with all constraints
• All indexes with justification
• Migration file (up + down)
• updated_at trigger
• Access pattern assumptions
• Future evolution notes

Example prompts:

Use the database-design skill.

Design the schema for an invoice management system.
Entities: customers, invoices, invoice_items, payments.
Rules:
- An invoice belongs to one customer
- An invoice has many items, each with product name, quantity, and unit price
- Payments can be partial (multiple payments per invoice)
- Invoices support soft delete
- We need to query invoices by customer and by status frequently

Use the database-design skill.

I need to add a discount system to my existing orders table.
Here is the current schema: [paste schema]
Add: discount codes, discount types (percentage/fixed), and usage tracking.
Generate a zero-downtime migration.

testing-strategy

What it does: Designs and implements a complete testing strategy across unit, integration, architecture, and E2E layers. Provides concrete code examples, CI pipeline configuration, and prescribes exactly what to test at each layer.

When to use: Setting up testing for a new project, deciding what to test and where, writing tests for a specific feature, or fixing a fragile test suite.

What you get:

• Testing pyramid with coverage targets per layer
• Unit test examples (AAA pattern, Builder, Clock injection)
• Integration test setup (testcontainers, WebApplicationFactory)
• Architecture tests with NetArchTest
• E2E test structure and scenarios
• CI YAML configuration
• Naming conventions
• Anti-pattern diagnosis

Example prompts:

Use the testing-strategy skill.

Write tests for this Use Case:
[paste CreateInvoiceUseCase.cs]

Domain rule: An invoice cannot be created for a customer with overdue payments.

Use the testing-strategy skill.

Set up the full testing strategy for a .NET 8 API project.
We use Dapper + PostgreSQL. I want unit, integration, and architecture tests.
Show me the project structure and a working example for each layer.

devops-pipeline

What it does: Designs and implements production-grade CI/CD pipelines: fast stages, secure secret management, Docker multi-stage builds, staging gates, deployment strategies (blue/green, canary), and rollback procedures.

When to use: Setting up CI/CD for a new project, improving an existing slow or fragile pipeline, implementing a deployment strategy, or adding security scanning.

What you get:

• Full GitHub Actions (or GitLab CI) YAML
• Multi-stage Dockerfile with non-root user
• Deployment strategy chosen with justification
• Secret management approach
• Rollback procedure
• Notification setup
• Estimated runtime per stage

Example prompts:

Use the devops-pipeline skill.

Create a CI/CD pipeline for a .NET 8 API + React frontend monorepo.
Target: AWS ECS (containers).
Requirements:
- Run tests before any deploy
- Deploy to staging automatically on merge to main
- Deploy to production with manual approval
- Scan for CVEs before staging deploy
- Notify Slack on failure

Use the devops-pipeline skill.

Our pipeline takes 25 minutes. Here is our current GitHub Actions config:
[paste YAML]
Identify what can be parallelized or cached and rewrite it.

security-review

What it does: Reviews application code for security vulnerabilities with the depth of a penetration tester: SQL injection, authentication gaps, authorization bypasses (BOLA/IDOR), sensitive data exposure, dependency CVEs, and more. Produces a structured report with evidence and concrete fixes.

When to use: Before merging code that handles user input, authentication, API endpoints, payments, or sensitive data. Also useful for periodic security audits.

What you get:

• Threat model of the code being reviewed
• Findings per OWASP category with vulnerable code + attack scenario + fix
• Severity levels: CRITICAL / HIGH / MEDIUM / LOW / INFO
• Summary with merge verdict: BLOCKED / APPROVED WITH NOTES / APPROVED

Example prompts:

Use the security-review skill.

Review this authentication module for security vulnerabilities:
[paste login endpoint + JWT validation code]

Use the security-review skill.

Perform a full security review of this API controller.
It handles file uploads and user profile updates.
[paste code]

Use the security-review skill.

Focus on authorization. Verify there is no way for a user
to access or modify another user's resources.
Here are all the endpoints: [paste code]

system-design

What it does: Designs scalable, reliable systems from requirements to architecture. Covers scale estimation, API design, data model selection, high-level component diagram, bottleneck analysis, failure modes, and observability plan.

When to use: Designing a new system or major feature, evaluating architectural options, preparing for a system design interview, or reviewing an existing architecture.

What you get:

• Requirements clarification (functional + non-functional)
• Scale estimates (DAU, RPS, storage)
• API design
• Data model with storage technology justification
• Architecture diagram (components + data flow)
• Bottlenecks and solutions
• Failure mode analysis per dependency
• Observability plan (metrics, logs, traces, alerts)
• Trade-offs and future evolution

Example prompts:

Use the system-design skill.

Design a notification system that supports:
- Email, push, and SMS channels
- 5 million daily active users
- Notifications triggered by user events (purchase, comment, follow)
- Users can set per-channel preferences
- Delivery must be reliable (no lost notifications)
- Latency: push within 1 second, email within 30 seconds

Use the system-design skill.

Design the backend for a real-time collaborative document editor
(similar to Notion). Focus on: conflict resolution, real-time sync,
and offline support. Scale: 100k concurrent users.

Creating a New Skill

cp templates/skill-template.md skills/my-new-skill/SKILL.md
# edit the file, then test it:
ai-skill show my-new-skill

The template includes all required sections: Role, Mandatory Rules, Process, Output Format, Quality Checklist, and Anti-patterns.

License

MIT