Coding-Agenten und Entwickler-Workflows
Codex Skills, Coding Prompts und Agent-Workflows
Prompts und Skills fuer Coding-Agenten, Code Review, Webentwicklung, Automationen und produktive Entwickler-Workflows mit KI.
Codex und andere Coding-Agenten veraendern, wie Entwickler Aufgaben planen, Code pruefen, Fehler suchen und Anwendungen bauen. Gute Prompts und Skills helfen, diese Arbeit strukturierter und wiederholbarer zu machen.
Diese Seite buendelt Inhalte fuer Entwickler, Vibe-Coder und technische Teams: Code Review, Webentwicklung, Automationen, Testing, API-Arbeit und Agent-Workflows. Ziel ist nicht ein einzelner Trick, sondern ein Werkzeugkasten fuer wiederkehrende Coding-Aufgaben.
Die Inhalte sind als Vorlagen zu verstehen. Pruefe generierten Code immer fachlich, teste Aenderungen und gib keine geheimen Schluessel, Kundendaten oder internen Zugangsdaten in Prompts ein.
Wofuer diese Seite nuetzlich ist
Coding-Prompts fuer Planung, Debugging und Refactoring finden
Skills fuer Webentwicklung, Testing und API-Arbeit entdecken
Agent-Workflows fuer wiederholbare Entwickleraufgaben strukturieren
Prompts fuer Code Review und technische Dokumentation nutzen
Coding-Prompts fuer Entwickler
371 passende Eintraege gefunden, hier kuratiert angezeigt.
Erstellt Unit-Tests für ein gegebenes Django-Viewset. Dabei werden CRUD-Operationen sowie Randfaelle wie ungueltige Eingaben oder Berechtigungsprobleme beruecksichtigt. Fuer die Tests werden die Django-TestCase-Klasse und der APIClient verwendet.
I want you to act as a Django Unit Test Generator. I will provide you with a Django Viewset class, and your job is to generate unit tests for it. Ensure the following: 1. Create test cases for all CRUD (Create, Read, Update, Delete) operations. 2. Include edge cases and scenarios such as invalid inputs or permissions issues. 3. Use Django's TestCase class and the APIClient for making requests. 4. Make use of setup methods to initialize any required data. Please organize the generated test cases with descriptive method names and comments for clarity. Ensure tests follow Django's standard practices and naming conventions.
TestingDjangoUnit Tests+1
Dieser Prompt hilft dabei, eine verständliche Projektdokumentation als FORME.md oder unter einem eigenen Dateinamen zu erstellen. Er richtet sich an nicht technische Gründer, Product Owner und Designer, die ein technisches System ohne Codelektüre verstehen müssen. Die Dokumentation erklärt Architektur, Datenflüsse, Technologieentscheidungen, Konfiguration und bekannte Fallstricke mit Analogien und klarer Struktur.
You are a senior technical writer who specializes in making complex systems understandable to non-engineers. You have a gift for analogy, narrative, and turning architecture diagrams into stories. I need you to analyze this project and write a comprehensive documentation file called `FORME.md` that explains everything about this project in plain language. ## Project Context - **Project name:** name - **What it does (one sentence):** [e.g., "A SaaS platform that lets restaurants manage their own online ordering without paying commission to aggregators"] - **My role:** [e.g., "I'm the founder / product owner / designer — I don't write code but I make all product and architecture decisions"] - **Tech stack (if you know it):** [e.g., "Next.js, Supabase, Tailwind" or "I'm not sure, figure it out from the code"] - **Stage:** [MVP / v1 in production / scaling / legacy refactor] ## Codebase [Upload files, provide path, or paste key files] ## Document Structure Write the FORME.md with these sections, in this order: ### 1. The Big Picture (Project Overview) Start with a 3-4 sentence executive summary anyone could understand. Then provide: - What problem this solves and for whom - How users interact with it (the user journey in plain words) - A "if this were a restaurant" (or similar) analogy for the entire system ### 2. Technical Architecture — The Blueprint Explain how the system is designed and WHY those choices were made. - Draw the architecture using a simple text diagram (boxes and arrows) - Explain each major layer/service like you're giving a building tour: "This is the kitchen (API layer) — all the real work happens here. Orders come in from the front desk (frontend), get processed here, and results get stored in the filing cabinet (database)." - For every architectural decision, answer: "Why this and not the obvious alternative?" - Highlight any clever or unusual choices the developer made ### 3. Codebase Structure — The Filing System Map out the project's file and folder organization. - Show the folder tree (top 2-3 levels) - For each major folder, explain: - What lives here (in plain words) - When would someone need to open this folder - How it relates to other folders - Flag any non-obvious naming conventions - Identify the "entry points" — the files where things start ### 4. Connections & Data Flow — How Things Talk to Each Other Trace how data moves through the system. - Pick 2-3 core user actions (e.g., "user signs up", "user places an order") - For each action, walk through the FULL journey step by step: "When a user clicks 'Place Order', here's what happens behind the scenes: 1. The button triggers a function in [file] — think of it as ringing a bell 2. That bell sound travels to api_route — the kitchen hears the order 3. The kitchen checks with [database] — do we have the ingredients? 4. If yes, it sends back a confirmation — the waiter brings the receipt" - Explain external service connections (payments, email, APIs) and what happens if they fail - Describe the authentication flow (how does the app know who you are?) ### 5. Technology Choices — The Toolbox For every significant technology/library/service used: - What it is (one sentence, no jargon) - What job it does in this project specifically - Why it was chosen over alternatives (be specific: "We use Supabase instead of Firebase because...") - Any limitations or trade-offs you should know about - Cost implications (free tier? paid? usage-based?) Format as a table: | Technology | What It Does Here | Why This One | Watch Out For | |-----------|------------------|-------------|---------------| ### 6. Environment & Configuration Explain the setup without assuming technical knowledge: - What environment variables exist and what each one controls (in plain language) - How different environments work (development vs staging vs production) - "If you need to change [X], you'd update [Y] — but be careful because [Z]" - Any secrets/keys and which services they connect to (NOT the actual values) ### 7. Lessons Learned — The War Stories This is the most valuable section. Document: **Bugs & Fixes:** - Major bugs encountered during development - What caused them (explained simply) - How they were fixed - How to avoid similar issues in the future **Pitfalls & Landmines:** - Things that look simple but are secretly complicated - "If you ever need to change [X], be careful because it also affects [Y] and [Z]" - Known technical debt and why it exists **Discoveries:** - New technologies or techniques explored - What worked well and what didn't - "If I were starting over, I would..." **Engineering Wisdom:** - Best practices that emerged from this project - Patterns that proved reliable - How experienced engineers think about these problems ### 8. Quick Reference Card A cheat sheet at the end: - How to run the project locally (step by step, assume zero setup) - Key URLs (production, staging, admin panels, dashboards) - Who/where to go when something breaks - Most commonly needed commands ## Writing Rules — NON-NEGOTIABLE 1. **No unexplained jargon.** Every technical term gets an immediate plain-language explanation or analogy on first use. You can use the technical term afterward, but the reader must understand it first. 2. **Use analogies aggressively.** Compare systems to restaurants, post offices, libraries, factories, orchestras — whatever makes the concept click. The analogy should be CONSISTENT within a section (don't switch from restaurant to hospital mid-explanation). 3. **Tell the story of WHY.** Don't just document what exists. Explain why decisions were made, what alternatives were considered, and what trade-offs were accepted. "We went with X because Y, even though it means we can't easily do Z later." 4. **Be engaging.** Use conversational tone, rhetorical questions, light humor where appropriate. This document should be something someone actually WANTS to read, not something they're forced to. If a section is boring, rewrite it until it isn't. 5. **Be honest about problems.** Flag technical debt, known issues, and "we did this because of time pressure" decisions. This document is more useful when it's truthful than when it's polished. 6. **Include "what could go wrong" for every major system.** Not to scare, but to prepare. "If the payment service goes down, here's what happens and here's what to do." 7. **Use progressive disclosure.** Start each section with the simple version, then go deeper. A reader should be able to stop at any point and still have a useful understanding. 8. **Format for scannability.** Use headers, bold key terms, short paragraphs, and bullet points for lists. But use prose (not bullets) for explanations and narratives. ## Example Tone WRONG — dry and jargon-heavy: "The application implements server-side rendering with incremental static regeneration, utilizing Next.js App Router with React Server Components for optimal TTFB." RIGHT — clear and engaging: "When someone visits our site, the server pre-builds the page before sending it — like a restaurant that preps your meal before you arrive instead of starting from scratch when you sit down. This is called 'server-side rendering' and it's why pages load fast. We use Next.js App Router for this, which is like the kitchen's workflow system that decides what gets prepped ahead and what gets cooked to order." WRONG — listing without context: "Dependencies: React 18, Next.js 14, Tailwind CSS, Supabase, Stripe" RIGHT — explaining the team: "Think of our tech stack as a crew, each member with a specialty: - **React** is the set designer — it builds everything you see on screen - **Next.js** is the stage manager — it orchestrates when and how things appear - **Tailwind** is the costume department — it handles all the visual styling - **Supabase** is the filing clerk — it stores and retrieves all our data - **Stripe** is the cashier — it handles all money stuff securely"
Technische DokumentationProjektverständnisArchitektur+2
Erstelle ein Python-Skript für Pydroid 3 auf Android, das verschiedene Update-Arten prüft. Es soll ein Menü, auswählbare Prüfungen und Fortschrittsanzeigen mit Details wie Grösse, Geschwindigkeit und verbleibender Zeit enthalten.
Act as a professional Python coder. You are one of the best in your industry and currently freelancing. Your task is to create a Python script that works on an Android phone using Pydroid 3.
Your script should:
- Provide a menu with options for checking updates: system updates, security updates, Google Play updates, etc.
- Allow the user to check for updates on all options or a selected one.
- Display updates available, let the user choose to update, and show a progress bar with details such as update size, download speed, and estimated time remaining.
- Use colorful designs related to each type of update.
- Keep the code under 300 lines in a single file called `app.py`.
- Include comments for clarity.
Here is a simplified version of how you might structure this script:
```python
# Import necessary modules
import os
import time
from some_gui_library import Menu, ProgressBar
# Define update functions
def check_system_update():
# Implement system update checking logic
pass
def check_security_update():
# Implement security update checking logic
pass
def check_google_play_update():
# Implement Google Play update checking logic
pass
# Main function to display menu and handle user input
def main():
menu = Menu()
menu.add_option('Check System Updates', check_system_update)
menu.add_option('Check Security Updates', check_security_update)
menu.add_option('Check Google Play Updates', check_google_play_update)
menu.add_option('Check All Updates', lambda: [check_system_update(), check_security_update(), check_google_play_update()])
while True:
choice = menu.show()
if choice is None:
break
else:
choice()
# Display progress bar and update information
progress_bar = ProgressBar()
progress_bar.start()
# Run the main function
if __name__ == '__main__':
main()
```
Note: This script is a template and requires the implementation of actual update checking and GUI handling logic. Customize it with actual libraries and methods suitable for Pydroid 3 and your specific needs.PythonAndroidPydroid 3+2
Handle als Sicherheitsspezialist für Android KI Apps. Implementiere sichere Konfigurationen, um API-Schlüssel zu schützen, Missbrauch zu verhindern und ein nachhaltiges Preismodell für deine Anwendung aufzubauen.
Act as an Android AI App Security Specialist. You are responsible for implementing secure configurations to protect API keys, prevent misuse, and establish a sustainable pricing model for your application. Your tasks include: 1. **Backend Proxy Configuration:** - Set up a minimal, secure proxy backend using services like Railway.app, Render.com, Vercel, or Firebase Cloud Functions. - Create a single endpoint to receive user messages and relay them to the AI API: POST/chat. - Ensure the API key is securely stored on the backend and never exposed in the client application. 2. **Android App Updates:** - Remove all API keys from the Android app codebase. - Use Retrofit or Ktor to connect directly to the backend proxy endpoint (e.g., https://albaroka.com/chat). - Ensure no hard-coded keys exist in BuildConfig or code. 3. **Pricing Model Implementation:** - Prefer a subscription model via Google Play over one-time payments for sustainability. - Integrate with Google Play Billing Library (com.android.billingclient:billing:7.0.0). - Manage user quotas and premium memberships from the backend. 4. **Security and Play Compliance:** - Apply strict Proguard rules to obfuscate API calls, keys, and sensitive information. - Ensure compliance with Play Store data policies and testing phases (Internal Testing, Beta). 5. **Configuration Files and Code:** - Abstract API calls within a network package. - Align configurations with MainActivity or ViewModel structures. - Optimize Gradle and Proguard rule files for enhanced security and performance. This setup ensures the privacy of your API key, prevents misuse, supports a subscription-based revenue model, and adheres to Google Play's highest standards. Ensure your backend proxy is scalable and reliable.
SicherheitAndroidAPI+3
Fuehrt auf jeder Codebasis ein dreiphasiges Dead-Code-Audit durch: Entdeckung von ungenutzten Deklarationen, totem Kontrollfluss und Schein-Abhaengigkeiten. Danach folgt die Verifikation, um Fehlalarme durch Reflexion, DI-Container, Serialisierung oder oeffentliche APIs auszuschliessen, und die Triage mit risikobewerteten Cleanup-Batches. Als Ausgabe entstehen eine priorisierte Befundtabelle, eine sequenzierte Refactoring-Roadmap mit Schaetzungen zu LOC und Bundle-Auswirkung sowie eine kuerzliche Executive Summary mit den drei wirkungsvollsten Massnahmen.
You are a senior software architect specializing in codebase health and technical debt elimination.
Your task is to conduct a surgical dead-code audit — not just detect, but triage and prescribe.
────────────────────────────────────────
PHASE 1 — DISCOVERY (scan everything)
────────────────────────────────────────
Hunt for the following waste categories across the ENTIRE codebase:
A) UNREACHABLE DECLARATIONS
• Functions / methods never invoked (including indirect calls, callbacks, event handlers)
• Variables & constants written but never read after assignment
• Types, classes, structs, enums, interfaces defined but never instantiated or extended
• Entire source files excluded from compilation or never imported
B) DEAD CONTROL FLOW
• Branches that can never be reached (e.g. conditions that are always true/false,
code after unconditional return / throw / exit)
• Feature flags that have been hardcoded to one state
C) PHANTOM DEPENDENCIES
• Import / require / use statements whose exported symbols go completely untouched in that file
• Package-level dependencies (package.json, go.mod, Cargo.toml, etc.) with zero usage in source
────────────────────────────────────────
PHASE 2 — VERIFICATION (don't shoot living code)
────────────────────────────────────────
Before marking anything dead, rule out these false-positive sources:
- Dynamic dispatch, reflection, runtime type resolution
- Dependency injection containers (wiring via string names or decorators)
- Serialization / deserialization targets (ORM models, JSON mappers, protobuf)
- Metaprogramming: macros, annotations, code generators, template engines
- Test fixtures and test-only utilities
- Public API surface of library targets — exported symbols may be consumed externally
- Framework lifecycle hooks (e.g. beforeEach, onMount, middleware chains)
- Configuration-driven behavior (symbol names in config files, env vars, feature registries)
If any of these exemptions applies, lower the confidence rating accordingly and state the reason.
────────────────────────────────────────
PHASE 3 — TRIAGE (prioritize the cleanup)
────────────────────────────────────────
Assign each finding a Risk Level:
🔴 HIGH — safe to delete immediately; zero external callers, no framework magic
🟡 MEDIUM — likely dead but indirect usage is possible; verify before deleting
🟢 LOW — probably used via reflection / config / public API; flag for human review
────────────────────────────────────────
OUTPUT FORMAT
────────────────────────────────────────
Produce three sections:
### 1. Findings Table
| # | File | Line(s) | Symbol | Category | Risk | Confidence | Action |
|---|------|---------|--------|----------|------|------------|--------|
Categories: UNREACHABLE_DECL / DEAD_FLOW / PHANTOM_DEP
Actions : DELETE / RENAME_TO_UNDERSCORE / MOVE_TO_ARCHIVE / MANUAL_VERIFY / SUPPRESS_WITH_COMMENT
### 2. Cleanup Roadmap
Group findings into three sequential batches based on Risk Level.
For each batch, list:
- Estimated LOC removed
- Potential bundle / binary size impact
- Suggested refactoring order (which files to touch first to avoid cascading errors)
### 3. Executive Summary
| Metric | Count |
|--------|-------|
| Total findings | |
| High-confidence deletes | |
| Estimated LOC removed | |
| Estimated dead imports | |
| Files safe to delete entirely | |
| Estimated build time improvement | |
End with a one-paragraph assessment of overall codebase health
and the top-3 highest-impact actions the team should take first.CodeauditDead CodeRefactoring+1
Leitfaden zum Entwerfen einer inoffiziellen Instagram-API, die bestimmte Plattformfunktionen programmatisch zugänglich macht. Der Prompt behandelt Systemdesign, Authentifizierung, Dokumentation sowie Einschränkungen wie Datenschutz, Nutzungsbedingungen und den Verzicht auf direkte private Endpunkte.
Act as a Developer Experienced in Unofficial APIs. You are tasked with creating an unofficial Instagram API to access certain features programmatically. Your task is to: - Design a system that can interact with Instagram's platform without using the official API. - Ensure the API can perform actions such as retrieving posts, fetching user data, and accessing stories. You will: - Implement authentication mechanisms that mimic user behavior. - Ensure compliance with Instagram's terms of service to avoid bans. - Provide detailed documentation on setting up and using the API. Constraints: - Maintain user privacy and data security. - Avoid using Instagram's private endpoints directly. Variables: - feature - Feature to be accessed (e.g., posts, stories) - GET - HTTP method to use - userAgent - Custom user agent string for requests
APIAutomatisierungDatenanalyse
Dieser Prompt hilft, ein Feedbackformular für ein bestehendes Nextjs, React und TypeScript Projekt zu erstellen. Er leitet die Analyse der visuellen Identität, die Komponentenstruktur, Animationen, Echtzeitvalidierung, Barrierefreiheit und responsives Design an. Das Ergebnis soll vollständigen, organisierten Code liefern, der in das System integriert werden kann.
1<role>2You are an elite senior frontend developer with exceptional artistic expertise and modern aesthetic sensibility. You deeply master Next.js, React, TypeScript, and other modern frontend technologies, combining technical excellence with sophisticated visual design.3</role>45<instructions>6You will create a feedback form that is a true visual masterpiece.78Follow these guidelines in order of priority:9101. VISUAL IDENTITY ANALYSIS...+131 more lines
DesignFrontendReact+2
Erstelle eine umfassende Sales-Funnel-Anwendung mit React Flow. Der Fokus liegt auf produktionsreifen Funktionen, Mobile-First-Design und bewährten Programmierpraktiken. Die App soll Leads erfassen, Conversions nachverfolgen und Analysen integrieren. Ausserdem sollen modulare Architektur, wiederverwendbare Komponenten und Zustandsverwaltung fuer Skalierbarkeit und Wartbarkeit umgesetzt werden.
Act as a Full-Stack Developer specialized in sales funnels. Your task is to build a production-ready sales funnel application using React Flow. Your application will:
- Initialize using Vite with a React template and integrate @xyflow/react for creating interactive, node-based visualizations.
- Develop production-ready features including lead capture, conversion tracking, and analytics integration.
- Ensure mobile-first design principles are applied to enhance user experience on all devices using responsive CSS and media queries.
- Implement best coding practices such as modular architecture, reusable components, and state management for scalability and maintainability.
- Conduct thorough testing using tools like Jest and React Testing Library to ensure code quality and functionality without relying on mock data.
Enhance user experience by:
- Designing a simple and intuitive user interface that maintains high-quality user interactions.
- Incorporating clean and organized UI utilizing elements such as dropdown menus and slide-in/out sidebars to improve navigation and accessibility.
Use the following setup to begin your project:
```javascript
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react
import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
{ id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];
export default function App() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const onNodesChange = useCallback(
(changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
[],
);
const onEdgesChange = useCallback(
(changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
[],
);
const onConnect = useCallback(
(params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
[],
);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
/>
</div>
);
}
```ReactFrontendJavaScript+3
Dieser Prompt bittet um einen Lernplan für React in Tabellenform. Er soll Themen, detaillierte Lernhinweise und Übungsaufgaben für jedes Thema enthalten. Der Plan richtet sich an Personen, die ohne Vorkenntnisse in die Frontend Entwicklung einsteigen.
I want you to act as my teacher of React.js. I want to learn React.js from scratch for front-end development. Give me in response TABLE format. First Column should be for all the list of topics i should learn. Then second column should state in detail how to learn it and what to learn in it. And the third column should be of assignments of each topic for practice. Make sure it is beginner friendly, as I am learning from scratch.
ReactFrontendLernplan+1
Skills fuer Coding-Agenten
31 passende Skill- oder Agent-Eintraege gefunden.
Diese Anleitung erklärt, wann Xcode MCP Werkzeuge gegenüber Standardwerkzeugen verwendet werden sollen. Sie richtet sich an Entwicklerinnen, Entwickler und Agenten, die mit Xcode Projekten, Builds, Tests und SwiftUI Previews arbeiten. Die Nutzer lernen, Xcode MCP gezielt für Build, Test, Simulator, Preview und SourceKit Diagnosen einzusetzen. Für Dateioperationen wie Lesen, Schreiben und Suchen zeigt die Anleitung, dass Standardwerkzeuge zu bevorzugen sind. Das praktische Ergebnis ist ein tokenbewusster Arbeitsablauf für Xcode Aufgaben.
--- name: xcode-mcp description: Guidelines for efficient Xcode MCP tool usage. This skill should be used to understand when to use Xcode MCP tools vs standard tools. Xcode MCP consumes many tokens - use only for build, test, simulator, preview, and SourceKit diagnostics. Never use for file read/write/grep operations. --- # Xcode MCP Usage Guidelines Xcode MCP tools consume significant tokens. This skill defines when to use Xcode MCP and when to prefer standard tools. ## Complete Xcode MCP Tools Reference ### Window & Project Management | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__XcodeListWindows` | List open Xcode windows (get tabIdentifier) | Low ✓ | ### Build Operations | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__BuildProject` | Build the Xcode project | Medium ✓ | | `mcp__xcode__GetBuildLog` | Get build log with errors/warnings | Medium ✓ | | `mcp__xcode__XcodeListNavigatorIssues` | List issues in Issue Navigator | Low ✓ | ### Testing | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__GetTestList` | Get available tests from test plan | Low ✓ | | `mcp__xcode__RunAllTests` | Run all tests | Medium | | `mcp__xcode__RunSomeTests` | Run specific tests (preferred) | Medium ✓ | ### Preview & Execution | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__RenderPreview` | Render SwiftUI Preview snapshot | Medium ✓ | | `mcp__xcode__ExecuteSnippet` | Execute code snippet in file context | Medium ✓ | ### Diagnostics | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__XcodeRefreshCodeIssuesInFile` | Get compiler diagnostics for specific file | Low ✓ | | `mcp__ide__getDiagnostics` | Get SourceKit diagnostics (all open files) | Low ✓ | ### Documentation | Tool | Description | Token Cost | |------|-------------|------------| | `mcp__xcode__DocumentationSearch` | Search Apple Developer Documentation | Low ✓ | ### File Operations (HIGH TOKEN - NEVER USE) | Tool | Alternative | Why | |------|-------------|-----| | `mcp__xcode__XcodeRead` | `Read` tool | High token consumption | | `mcp__xcode__XcodeWrite` | `Write` tool | High token consumption | | `mcp__xcode__XcodeUpdate` | `Edit` tool | High token consumption | | `mcp__xcode__XcodeGrep` | `rg` / `Grep` tool | High token consumption | | `mcp__xcode__XcodeGlob` | `Glob` tool | High token consumption | | `mcp__xcode__XcodeLS` | `ls` command | High token consumption | | `mcp__xcode__XcodeRM` | `rm` command | High token consumption | | `mcp__xcode__XcodeMakeDir` | `mkdir` command | High token consumption | | `mcp__xcode__XcodeMV` | `mv` command | High token consumption | --- ## Recommended Workflows ### 1. Code Change & Build Flow ``` 1. Search code → rg "pattern" --type swift 2. Read file → Read tool 3. Edit file → Edit tool 4. Syntax check → mcp__ide__getDiagnostics 5. Build → mcp__xcode__BuildProject 6. Check errors → mcp__xcode__GetBuildLog (if build fails) ``` ### 2. Test Writing & Running Flow ``` 1. Read test file → Read tool 2. Write/edit test → Edit tool 3. Get test list → mcp__xcode__GetTestList 4. Run tests → mcp__xcode__RunSomeTests (specific tests) 5. Check results → Review test output ``` ### 3. SwiftUI Preview Flow ``` 1. Edit view → Edit tool 2. Render preview → mcp__xcode__RenderPreview 3. Iterate → Repeat as needed ``` ### 4. Debug Flow ``` 1. Check diagnostics → mcp__ide__getDiagnostics (quick syntax check) 2. Build project → mcp__xcode__BuildProject 3. Get build log → mcp__xcode__GetBuildLog (severity: error) 4. Fix issues → Edit tool 5. Rebuild → mcp__xcode__BuildProject ``` ### 5. Documentation Search ``` 1. Search docs → mcp__xcode__DocumentationSearch 2. Review results → Use information in implementation ``` --- ## Fallback Commands (When MCP Unavailable) If Xcode MCP is disconnected or unavailable, use these xcodebuild commands: ### Build Commands ```bash # Debug build (simulator) - replace <SchemeName> with your project's scheme xcodebuild -scheme <SchemeName> -configuration Debug -sdk iphonesimulator build # Release build (device) xcodebuild -scheme <SchemeName> -configuration Release -sdk iphoneos build # Build with workspace (for CocoaPods projects) xcodebuild -workspace <ProjectName>.xcworkspace -scheme <SchemeName> -configuration Debug -sdk iphonesimulator build # Build with project file xcodebuild -project <ProjectName>.xcodeproj -scheme <SchemeName> -configuration Debug -sdk iphonesimulator build # List available schemes xcodebuild -list ``` ### Test Commands ```bash # Run all tests xcodebuild test -scheme <SchemeName> -sdk iphonesimulator \ -destination "platform=iOS Simulator,name=iPhone 16" \ -configuration Debug # Run specific test class xcodebuild test -scheme <SchemeName> -sdk iphonesimulator \ -destination "platform=iOS Simulator,name=iPhone 16" \ -only-testing:<TestTarget>/<TestClassName> # Run specific test method xcodebuild test -scheme <SchemeName> -sdk iphonesimulator \ -destination "platform=iOS Simulator,name=iPhone 16" \ -only-testing:<TestTarget>/<TestClassName>/<testMethodName> # Run with code coverage xcodebuild test -scheme <SchemeName> -sdk iphonesimulator \ -configuration Debug -enableCodeCoverage YES # List available simulators xcrun simctl list devices available ``` ### Clean Build ```bash xcodebuild clean -scheme <SchemeName> ``` --- ## Quick Reference ### USE Xcode MCP For: - ✅ `BuildProject` - Building - ✅ `GetBuildLog` - Build errors - ✅ `RunSomeTests` - Running specific tests - ✅ `GetTestList` - Listing tests - ✅ `RenderPreview` - SwiftUI previews - ✅ `ExecuteSnippet` - Code execution - ✅ `DocumentationSearch` - Apple docs - ✅ `XcodeListWindows` - Get tabIdentifier - ✅ `mcp__ide__getDiagnostics` - SourceKit errors ### NEVER USE Xcode MCP For: - ❌ `XcodeRead` → Use `Read` tool - ❌ `XcodeWrite` → Use `Write` tool - ❌ `XcodeUpdate` → Use `Edit` tool - ❌ `XcodeGrep` → Use `rg` or `Grep` tool - ❌ `XcodeGlob` → Use `Glob` tool - ❌ `XcodeLS` → Use `ls` command - ❌ File operations → Use standard tools --- ## Token Efficiency Summary | Operation | Best Choice | Token Impact | |-----------|-------------|--------------| | Quick syntax check | `mcp__ide__getDiagnostics` | 🟢 Low | | Full build | `mcp__xcode__BuildProject` | 🟡 Medium | | Run specific tests | `mcp__xcode__RunSomeTests` | 🟡 Medium | | Run all tests | `mcp__xcode__RunAllTests` | 🟠 High | | Read file | `Read` tool | 🟠 High | | Edit file | `Edit` tool | 🟠 High| | Search code | `rg` / `Grep` | 🟢 Low | | List files | `ls` / `Glob` | 🟢 Low |
XcodeMCPBuilds+2
Diese Skill beschreibt einen Arbeitsablauf für WCAG Audits und die Behebung von Barrierefreiheitsproblemen in Webanwendungen. Sie richtet sich an Entwicklerinnen, Entwickler und QA Teams, die Benutzeroberflächen, Formulare und interaktive Komponenten prüfen. Die Nutzer lernen, automatisierte Prüfungen, Tastaturnavigation, Screenreader Tests, ARIA Muster und Farbkontrast systematisch einzuordnen. Als Ergebnis entstehen dokumentierte Verstösse, priorisierte Korrekturen und überprüfbare Anpassungen für zugänglichere Weboberflächen.
--- name: accessibility-testing-superpower description: | Performs WCAG compliance audits and accessibility remediation for web applications. Use when: 1) Auditing UI for WCAG 2.1/2.2 compliance 2) Fixing screen reader or keyboard navigation issues 3) Implementing ARIA patterns correctly 4) Reviewing color contrast and visual accessibility 5) Creating accessible forms or interactive components --- # Accessibility Testing Workflow ## Configuration - **WCAG Level**: AA - **Component Under Test**: Page - **Compliance Standard**: WCAG 2.1 - **Minimum Lighthouse Score**: 90 - **Primary Screen Reader**: NVDA - **Test Framework**: jest-axe ## Audit Decision Tree ``` Accessibility request received | +-- New component/page? | +-- Run automated scan first (axe-core, Lighthouse) | +-- Keyboard navigation test | +-- Screen reader announcement check | +-- Color contrast verification | +-- Existing violation to fix? | +-- Identify WCAG success criterion | +-- Check if semantic HTML solves it | +-- Apply ARIA only when HTML insufficient | +-- Verify fix with assistive technology | +-- Compliance audit? +-- Automated scan (catches ~30% of issues) +-- Manual testing checklist +-- Document violations by severity +-- Create remediation roadmap ``` ## WCAG Quick Reference ### Severity Classification | Severity | Impact | Examples | Fix Timeline | |----------|--------|----------|--------------| | Critical | Blocks access entirely | No keyboard focus, empty buttons, missing alt on functional images | Immediate | | Serious | Major barriers | Poor contrast, missing form labels, no skip links | Within sprint | | Moderate | Difficult but usable | Inconsistent navigation, unclear error messages | Next release | | Minor | Inconvenience | Redundant alt text, minor heading order issues | Backlog | ### Common Violations and Fixes **Missing accessible name** ```html <!-- Violation --> <button><svg>...</svg></button> <!-- Fix: aria-label --> <button aria-label="Close dialog"><svg>...</svg></button> <!-- Fix: visually hidden text --> <button><span class="sr-only">Close dialog</span><svg>...</svg></button> ``` **Form label association** ```html <!-- Violation --> <label>Email</label> <input type="email"> <!-- Fix: explicit association --> <label for="email">Email</label> <input type="email" id="email"> <!-- Fix: implicit association --> <label>Email <input type="email"></label> ``` **Color contrast failure** ``` Minimum ratios (WCAG AA): - Normal text (<18px or <14px bold): 4.5:1 - Large text (>=18px or >=14px bold): 3:1 - UI components and graphics: 3:1 Tools: WebAIM Contrast Checker, browser DevTools ``` **Focus visibility** ```css /* Never do this without alternative */ :focus { outline: none; } /* Proper custom focus */ :focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } ``` ## ARIA Decision Framework ``` Need to convey information to assistive technology? | +-- Can semantic HTML do it? | +-- YES: Use HTML (<button>, <nav>, <main>, <article>) | +-- NO: Continue to ARIA | +-- What type of ARIA needed? +-- Role: What IS this element? (role="dialog", role="tab") +-- State: What condition? (aria-expanded, aria-checked) +-- Property: What relationship? (aria-labelledby, aria-describedby) +-- Live region: Dynamic content? (aria-live="polite") ``` ### ARIA Patterns for Common Widgets **Disclosure (show/hide)** ```html <button aria-expanded="false" aria-controls="content-1"> Show details </button> <div id="content-1" hidden> Content here </div> ``` **Tab interface** ```html <div role="tablist" aria-label="Settings"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1"> General </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> Privacy </button> </div> <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div> <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div> ``` **Modal dialog** ```html <div role="dialog" aria-modal="true" aria-labelledby="dialog-title"> <h2 id="dialog-title">Confirm action</h2> <p>Are you sure you want to proceed?</p> <button>Cancel</button> <button>Confirm</button> </div> ``` ## Keyboard Navigation Checklist ``` [ ] All interactive elements focusable with Tab [ ] Focus order matches visual/logical order [ ] Focus visible on all elements [ ] No keyboard traps (can always Tab out) [ ] Skip link as first focusable element [ ] Escape closes modals/dropdowns [ ] Arrow keys navigate within widgets (tabs, menus, grids) [ ] Enter/Space activates buttons and links [ ] Custom shortcuts documented and configurable ``` ### Focus Management Patterns **Modal focus trap** ```javascript // On modal open: // 1. Save previously focused element // 2. Move focus to first focusable in modal // 3. Trap Tab within modal boundaries // On modal close: // 1. Return focus to saved element ``` **Dynamic content** ```javascript // After adding content: // - Announce via aria-live region, OR // - Move focus to new content heading // After removing content: // - Move focus to logical next element // - Never leave focus on removed element ``` ## Screen Reader Testing ### Announcement Verification | Element | Should Announce | |---------|-----------------| | Button | Role + name + state ("Submit button") | | Link | Name + "link" ("Home page link") | | Image | Alt text OR "decorative" (skip) | | Heading | Level + text ("Heading level 2, About us") | | Form field | Label + type + state + instructions | | Error | Error message + field association | ### Testing Commands (Quick Reference) **VoiceOver (macOS)** - VO = Ctrl + Option - VO + A: Read all - VO + Right/Left: Navigate elements - VO + Cmd + H: Next heading - VO + Cmd + J: Next form control **NVDA (Windows)** - NVDA + Down: Read all - Tab: Next focusable - H: Next heading - F: Next form field - B: Next button ## Automated Testing Integration ### axe-core in tests ```javascript // jest-axe import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); test('component is accessible', async () => { const { container } = render(<MyComponent />); const results = await axe(container); expect(results).toHaveNoViolations(); }); ``` ### Lighthouse CI threshold ```javascript // lighthouserc.js module.exports = { assertions: { 'categories:accessibility': ['error', { minScore: 90 / 100 }], }, }; ``` ## Remediation Priority Matrix ``` Impact vs Effort: Low Effort High Effort High Impact | DO FIRST | PLAN NEXT | | alt text | redesign | | labels | nav rebuild | ----------------|--------------|---------------| Low Impact | QUICK WIN | BACKLOG | | contrast | nice-to-have| | tweaks | enhancements| ``` ## Verification Checklist Before marking accessibility work complete: ``` Automated Testing: [ ] axe-core reports zero violations [ ] Lighthouse accessibility >= 90 [ ] HTML validator passes (affects AT parsing) Keyboard Testing: [ ] Full task completion without mouse [ ] Visible focus at all times [ ] Logical tab order [ ] No traps Screen Reader Testing: [ ] Tested with at least one screen reader (NVDA) [ ] All content announced correctly [ ] Interactive elements have roles/states [ ] Dynamic updates announced Visual Testing: [ ] Contrast ratios verified (4.5:1 minimum) [ ] Works at 200% zoom [ ] No information conveyed by color alone [ ] Respects prefers-reduced-motion ```
BarrierefreiheitWCAGWebanwendungen+2
Dieser Skill behandelt die Orchestrierung von Multi-Agenten-Teams für komplexe Aufgaben. Er richtet sich an Personen, die Agentenrollen, Arbeitsabläufe und Ressourcen systematisch planen und koordinieren möchten. Die Nutzenden lernen, Aufgaben zu zerlegen, Fähigkeiten passenden Agenten zuzuordnen und geeignete Ausführungsmuster zu wählen. Das praktische Ergebnis ist ein strukturierter Koordinationsplan mit Abhängigkeiten, Kontrollpunkten, Fehlerbehandlung und Leistungsüberwachung.
--- name: agent-organization-expert description: Multi-agent orchestration skill for team assembly, task decomposition, workflow optimization, and coordination strategies to achieve optimal team performance and resource utilization. --- # Agent Organization Assemble and coordinate multi-agent teams through systematic task analysis, capability mapping, and workflow design. ## Configuration - **Agent Count**: 3 - **Task Type**: general - **Orchestration Pattern**: parallel - **Max Concurrency**: 5 - **Timeout (seconds)**: 300 - **Retry Count**: 3 ## Core Process 1. **Analyze Requirements**: Understand task scope, constraints, and success criteria 2. **Map Capabilities**: Match available agents to required skills 3. **Design Workflow**: Create execution plan with dependencies and checkpoints 4. **Orchestrate Execution**: Coordinate 3 agents and monitor progress 5. **Optimize Continuously**: Adapt based on performance feedback ## Task Decomposition ### Requirement Analysis - Break complex tasks into discrete subtasks - Identify input/output requirements for each subtask - Estimate complexity and resource needs per component - Define clear success criteria for each unit ### Dependency Mapping - Document task execution order constraints - Identify data dependencies between subtasks - Map resource sharing requirements - Detect potential bottlenecks and conflicts ### Timeline Planning - Sequence tasks respecting dependencies - Identify parallelization opportunities (up to 5 concurrent) - Allocate buffer time for high-risk components - Define checkpoints for progress validation ## Agent Selection ### Capability Matching Select agents based on: - Required skills versus agent specializations - Historical performance on similar tasks - Current availability and workload capacity - Cost efficiency for the task complexity ### Selection Criteria Priority 1. **Capability fit**: Agent must possess required skills 2. **Track record**: Prefer agents with proven success 3. **Availability**: Sufficient capacity for timely completion 4. **Cost**: Optimize resource utilization within constraints ### Backup Planning - Identify alternate agents for critical roles - Define failover triggers and handoff procedures - Maintain redundancy for single-point-of-failure tasks ## Team Assembly ### Composition Principles - Ensure complete skill coverage for all subtasks - Balance workload across 3 team members - Minimize communication overhead - Include redundancy for critical functions ### Role Assignment - Match agents to subtasks based on strength - Define clear ownership and accountability - Establish communication channels between dependent roles - Document escalation paths for blockers ### Team Sizing - Smaller teams for tightly coupled tasks - Larger teams for parallelizable workloads - Consider coordination overhead in sizing decisions - Scale dynamically based on progress ## Orchestration Patterns ### Sequential Execution Use when tasks have strict ordering requirements: - Task B requires output from Task A - State must be consistent between steps - Error handling requires ordered rollback ### Parallel Processing Use when tasks are independent (parallel): - No data dependencies between tasks - Separate resource requirements - Results can be aggregated after completion - Maximum 5 concurrent operations ### Pipeline Pattern Use for streaming or continuous processing: - Each stage processes and forwards results - Enables concurrent execution of different stages - Reduces overall latency for multi-step workflows ### Hierarchical Delegation Use for complex tasks requiring sub-orchestration: - Lead agent coordinates sub-teams - Each sub-team handles a domain - Results aggregate upward through hierarchy ### Map-Reduce Use for large-scale data processing: - Map phase distributes work across agents - Each agent processes a partition - Reduce phase combines results ## Workflow Design ### Process Structure 1. **Entry point**: Validate inputs and initialize state 2. **Execution phases**: Ordered task groupings 3. **Checkpoints**: State persistence and validation points 4. **Exit point**: Result aggregation and cleanup ### Control Flow - Define branching conditions for alternative paths - Specify retry policies for transient failures (max 3 retries) - Establish timeout thresholds per phase (300s default) - Plan graceful degradation for partial failures ### Data Flow - Document data transformations between stages - Specify data formats and validation rules - Plan for data persistence at checkpoints - Handle data cleanup after completion ## Coordination Strategies ### Communication Patterns - **Direct**: Agent-to-agent for tight coupling - **Broadcast**: One-to-many for status updates - **Queue-based**: Asynchronous for decoupled tasks - **Event-driven**: Reactive to state changes ### Synchronization - Define sync points for dependent tasks - Implement waiting mechanisms with timeouts (300s) - Handle out-of-order completion gracefully - Maintain consistent state across agents ### Conflict Resolution - Establish priority rules for resource contention - Define arbitration mechanisms for conflicts - Document rollback procedures for deadlocks - Prevent conflicts through careful scheduling ## Performance Optimization ### Load Balancing - Distribute work based on agent capacity - Monitor utilization and rebalance dynamically - Avoid overloading high-performing agents - Consider agent locality for data-intensive tasks ### Bottleneck Management - Identify slow stages through monitoring - Add capacity to constrained resources - Restructure workflows to reduce dependencies - Cache intermediate results where beneficial ### Resource Efficiency - Pool shared resources across agents - Release resources promptly after use - Batch similar operations to reduce overhead - Monitor and alert on resource waste ## Monitoring and Adaptation ### Progress Tracking - Monitor completion status per task - Track time spent versus estimates - Identify tasks at risk of delay - Report aggregated progress to stakeholders ### Performance Metrics - Task completion rate and latency - Agent utilization and throughput - Error rates and recovery times - Resource consumption and cost ### Dynamic Adjustment - Reallocate agents based on progress - Adjust priorities based on blockers - Scale team size based on workload - Modify workflow based on learning ## Error Handling ### Failure Detection - Monitor for task failures and timeouts (300s threshold) - Detect agent unavailability promptly - Identify cascade failure patterns - Alert on anomalous behavior ### Recovery Procedures - Retry transient failures with backoff (up to 3 attempts) - Failover to backup agents when needed - Rollback to last checkpoint on critical failure - Escalate unrecoverable issues ### Prevention - Validate inputs before execution - Test agent availability before assignment - Design for graceful degradation - Build redundancy into critical paths ## Quality Assurance ### Validation Gates - Verify outputs at each checkpoint - Cross-check results from parallel tasks - Validate final aggregated results - Confirm success criteria are met ### Performance Standards - Agent selection accuracy target: >95% - Task completion rate target: >99% - Response time target: <5 seconds - Resource utilization: optimal range 60-80% ## Best Practices ### Planning - Invest time in thorough task analysis - Document assumptions and constraints - Plan for failure scenarios upfront - Define clear success metrics ### Execution - Start with minimal viable team (3 agents) - Scale based on observed needs - Maintain clear communication channels - Track progress against milestones ### Learning - Capture performance data for analysis - Identify patterns in successes and failures - Refine selection and coordination strategies - Share learnings across future orchestrations
Multi-AgentenOrchestrierungWorkflow+2
Gibt Orientierung fuer bewusste visuelle Gestaltung von Benutzeroberflaechen. Nuetzlich fuer Layout, Typografie, Stilentscheidungen und UI-Verbesserungen, die nicht nach Standardvorlage wirken sollen. Quelle: Anthropic Skills; Lizenz: Apache-2.0, kommerziell nutzbar unter Beachtung der Lizenz.
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---
# Frontend Design
Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify.
## Ground it in the subject
If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. If there's any information in your memory about the human's preferences, context about what they're building, or designs you've made before – use that as a hint. The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from. Build with the brief's real content and subject matter throughout.
## Design principles
For web designs, the hero is a thesis. Open with the most characteristic thing in the subject's world, in whatever form makes sense for it: a headline, an image, an animation, a live demo, an interactive moment. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the template answer, only use if that's truly the best option.
Typography carries the personality of the page. Pair the display and body faces deliberately, not the same families you would reach for on any other project, and set a clear type scale with intentional weights, widths, and spacing. Make the type treatment itself a memorable part of the design, not a neutral delivery vehicle for the content.
Structure is information. Structural devices, numbering, eyebrows, dividers, labels, should encode something true about the content, not decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence - like a real process or a typed timeline where order carries information the reader needs. Question if choices like numbered markers actually make sense before incorporating them.
Leverage motion deliberately. Think about where and if animation can serve the subject: a page-load sequence, a scroll-triggered reveal, hover micro-interactions, ambient atmosphere. An orchestrated moment usually lands harder than scattered effects; choose what the direction calls for. However, sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated.
Match complexity to the vision. Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.
Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
## Process: brainstorm, explore, plan, critique, build, critique again
For calibration: AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. All three are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. Just like a human designer who's hired, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
Work in two passes. First, brainstorm a short design plan based on the human's design brief: create a compact token system with color, type, layout, and signature. Color: describe the palette as 4–6 named hex values. Type: the typefaces for 2+ roles (a characterful display face that's used with restraint, a complementary body face, and a utility face for captions or data if needed). Layout: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare. Signature: the single unique element this page will be remembered by that embodies the brief in an appropriate way.
Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan exactly and deriving every color and type decision from it.
When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections.
Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them.
## Restraint and self-critique
Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Not taking a risk can be a risk itself! Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected. Critique your own work as you build, taking screenshots if your environment supports it – a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creators have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
## More on writing in design
Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. They are design material, not decoration. Bring the same intentionality to copy that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. A person manages notifications, not webhook config. Describe what something does in plain terms rather than selling it. Being specific is always better than being clever.
Use active voice as default. A control should say exactly what happens when it's used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
Keep the register conversational and tuned: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each element do exactly one job. A label labels, an example demonstrates, and nothing quietly does double duty.
FILE:LICENSE.txt
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
FILE:_SOURCE_LICENSE.md
Source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
License: Apache-2.0
Commercial use: Yes, subject to the license terms and notices.
Imported: 2026-06-19T23:43:14.070Z
FrontendUI-DesignTypografie
Unterstuetzt beim Erstellen komplexer HTML-Artefakte mit modernen Frontend-Technologien. Sinnvoll fuer interaktive Prototypen mit Zustand, Routing oder UI-Komponenten.
---
name: web-artifacts-builder
description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
license: Complete terms in LICENSE.txt
---
# Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact
**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
## Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
## Quick Start
### Step 1: Initialize Project
Run the initialization script to create a new React project:
```bash
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```
This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (`@/`) configured
- ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
### Step 2: Develop Your Artifact
To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.
### Step 3: Bundle to Single HTML File
To bundle the React app into a single HTML artifact:
```bash
bash scripts/bundle-artifact.sh
```
This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
**Requirements**: Your project must have an `index.html` in the root directory.
**What the script does**:
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Creates `.parcelrc` config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline
### Step 4: Share Artifact with User
Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
### Step 5: Testing/Visualizing the Artifact (Optional)
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
## Reference
- **shadcn/ui components**: https://ui.shadcn.com/docs/components
FILE:LICENSE.txt
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2026 Anthropic, PBC.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
FILE:scripts/bundle-artifact.sh
#!/bin/bash
set -e
echo "📦 Bundling React app to single HTML artifact..."
# Check if we're in a project directory
if [ ! -f "package.json" ]; then
echo "❌ Error: No package.json found. Run this script from your project root."
exit 1
fi
# Check if index.html exists
if [ ! -f "index.html" ]; then
echo "❌ Error: No index.html found in project root."
echo " This script requires an index.html entry point."
exit 1
fi
# Install bundling dependencies
echo "📦 Installing bundling dependencies..."
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
# Create Parcel config with tspaths resolver
if [ ! -f ".parcelrc" ]; then
echo "🔧 Creating Parcel configuration with path alias support..."
cat > .parcelrc << 'EOF'
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi
# Clean previous build
echo "🧹 Cleaning previous build..."
rm -rf dist bundle.html
# Build with Parcel
echo "🔨 Building with Parcel..."
pnpm exec parcel build index.html --dist-dir dist --no-source-maps
# Inline everything into single HTML
echo "🎯 Inlining all assets into single HTML file..."
pnpm exec html-inline dist/index.html > bundle.html
# Get file size
FILE_SIZE=$(du -h bundle.html | cut -f1)
echo ""
echo "✅ Bundle complete!"
echo "📄 Output: bundle.html ($FILE_SIZE)"
echo ""
echo "You can now use this single HTML file as an artifact in Claude conversations."
echo "To test locally: open bundle.html in your browser"
FILE:scripts/init-artifact.sh
#!/bin/bash
# Exit on error
set -e
# Detect Node version
NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
echo "🔍 Detected Node.js version: $NODE_VERSION"
if [ "$NODE_VERSION" -lt 18 ]; then
echo "❌ Error: Node.js 18 or higher is required"
echo " Current version: $(node -v)"
exit 1
fi
# Set Vite version based on Node version
if [ "$NODE_VERSION" -ge 20 ]; then
VITE_VERSION="latest"
echo "✅ Using Vite latest (Node 20+)"
else
VITE_VERSION="5.4.11"
echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
fi
# Detect OS and set sed syntax
if [[ "$OSTYPE" == "darwin"* ]]; then
SED_INPLACE="sed -i ''"
else
SED_INPLACE="sed -i"
fi
# Check if pnpm is installed
if ! command -v pnpm &> /dev/null; then
echo "📦 pnpm not found. Installing pnpm..."
npm install -g pnpm
fi
# Check if project name is provided
if [ -z "$1" ]; then
echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
exit 1
fi
PROJECT_NAME="$1"
SCRIPT_DIR="$(cd "$(dirname "BASH_SOURCE[0]")" && pwd)"
COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
# Check if components tarball exists
if [ ! -f "$COMPONENTS_TARBALL" ]; then
echo "❌ Error: shadcn-components.tar.gz not found in script directory"
echo " Expected location: $COMPONENTS_TARBALL"
exit 1
fi
echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
# Create new Vite project (always use latest create-vite, pin vite version later)
pnpm create vite "$PROJECT_NAME" --template react-ts
# Navigate into project directory
cd "$PROJECT_NAME"
echo "🧹 Cleaning up Vite template..."
$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
echo "📦 Installing base dependencies..."
pnpm install
# Pin Vite version for Node 18
if [ "$NODE_VERSION" -lt 20 ]; then
echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
pnpm add -D vite@$VITE_VERSION
fi
echo "📦 Installing Tailwind CSS and dependencies..."
pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
echo "⚙️ Creating Tailwind and PostCSS configuration..."
cat > postcss.config.js << 'EOF'
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
EOF
echo "📝 Configuring Tailwind with shadcn theme..."
cat > tailwind.config.js << 'EOF'
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
EOF
# Add Tailwind directives and CSS variables to index.css
echo "🎨 Adding Tailwind directives and CSS variables..."
cat > src/index.css << 'EOF'
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
EOF
# Add path aliases to tsconfig.json
echo "🔧 Adding path aliases to tsconfig.json..."
node -e "
const fs = require('fs');
const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
config.compilerOptions = config.compilerOptions || {};
config.compilerOptions.baseUrl = '.';
config.compilerOptions.paths = { '@/*': ['./src/*'] };
fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
"
# Add path aliases to tsconfig.app.json
echo "🔧 Adding path aliases to tsconfig.app.json..."
node -e "
const fs = require('fs');
const path = 'tsconfig.app.json';
const content = fs.readFileSync(path, 'utf8');
// Remove comments manually
const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
const jsonContent = lines.join('\n');
const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
config.compilerOptions = config.compilerOptions || {};
config.compilerOptions.baseUrl = '.';
config.compilerOptions.paths = { '@/*': ['./src/*'] };
fs.writeFileSync(path, JSON.stringify(config, null, 2));
"
# Update vite.config.ts
echo "⚙️ Updating Vite configuration..."
cat > vite.config.ts << 'EOF'
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
EOF
# Install all shadcn/ui dependencies
echo "📦 Installing shadcn/ui dependencies..."
pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
# Extract shadcn components from tarball
echo "📦 Extracting shadcn/ui components..."
tar -xzf "$COMPONENTS_TARBALL" -C src/
# Create components.json for reference
echo "📝 Creating components.json config..."
cat > components.json << 'EOF'
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
EOF
echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
echo ""
echo "📦 Included components (40+ total):"
echo " - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
echo " - button, calendar, card, carousel, checkbox, collapsible"
echo " - command, context-menu, dialog, drawer, dropdown-menu"
echo " - form, hover-card, input, label, menubar, navigation-menu"
echo " - popover, progress, radio-group, resizable, scroll-area"
echo " - select, separator, sheet, skeleton, slider, sonner"
echo " - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
echo ""
echo "To start developing:"
echo " cd $PROJECT_NAME"
echo " pnpm dev"
echo ""
echo "📚 Import components like:"
echo " import { Button } from '@/components/ui/button'"
echo " import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
echo " import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"
FILE:scripts/shadcn-components.tar.gz
[Binary or non-UTF8 file skipped during import]
FILE:_SOURCE_LICENSE.md
Source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
License: Apache-2.0
Commercial use: Yes, subject to the license terms and notices.
Imported: 2026-06-19T23:43:14.070Z
FrontendHTML-ArtefaktePrototyping
Diese Skill-Anleitung beschreibt das Testen und Debuggen lokaler Webanwendungen mit Playwright. Sie richtet sich an Entwicklerinnen, Entwickler und Testpersonen, die Frontend-Funktionen in einem echten Browser prüfen möchten. Die Nutzerinnen und Nutzer lernen, Navigation, Formulare, Benutzerinteraktionen, Sichtbarkeit von Elementen und responsive Ansichten zu verifizieren. Als praktisches Ergebnis können sie Screenshots erfassen, Browserprotokolle auswerten und wiederholbare Tests für lokale Anwendungen aufbauen.
---
name: web-application-testing-skill
description: A toolkit for interacting with and testing local web applications using Playwright.
---
# Web Application Testing
This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
## When to Use This Skill
Use this skill when you need to:
- Test frontend functionality in a real browser
- Verify UI behavior and interactions
- Debug web application issues
- Capture screenshots for documentation or debugging
- Inspect browser console logs
- Validate form submissions and user flows
- Check responsive design across viewports
## Prerequisites
- Node.js installed on the system
- A locally running web application (or accessible URL)
- Playwright will be installed automatically if not present
## Core Capabilities
### 1. Browser Automation
- Navigate to URLs
- Click buttons and links
- Fill form fields
- Select dropdowns
- Handle dialogs and alerts
### 2. Verification
- Assert element presence
- Verify text content
- Check element visibility
- Validate URLs
- Test responsive behavior
### 3. Debugging
- Capture screenshots
- View console logs
- Inspect network requests
- Debug failed tests
## Usage Examples
### Example 1: Basic Navigation Test
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```
### Example 2: Form Interaction
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```
### Example 3: Screenshot Capture
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```
## Guidelines
1. **Always verify the app is running** - Check that the local server is accessible before running tests
2. **Use explicit waits** - Wait for elements or navigation to complete before interacting
3. **Capture screenshots on failure** - Take screenshots to help debug issues
4. **Clean up resources** - Always close the browser when done
5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations
6. **Test incrementally** - Start with simple interactions before complex flows
7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes
## Common Patterns
### Pattern: Wait for Element
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```
### Pattern: Check if Element Exists
```javascript
const exists = await page.locator('#element-id').count() > 0;
```
### Pattern: Get Console Logs
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```
### Pattern: Handle Errors
```javascript
try {
await page.click('#button');
} catch (error) {
await page.screenshot({ path: 'error.png' });
throw error;
}
```
## Limitations
- Requires Node.js environment
- Cannot test native mobile apps (use React Native Testing Library instead)
- May have issues with complex authentication flows
- Some modern frameworks may require specific configurationWebentwicklungTestautomatisierungPlaywright+1
Haeufige Fragen
Sind Codex Skills nur fuer OpenAI Codex gedacht?
Nein. Die Seite buendelt Inhalte fuer Coding-Agenten allgemein. Viele Prompts koennen auch mit ChatGPT, Claude, Cursor, lokalen Agenten oder anderen Entwicklungswerkzeugen genutzt werden.
Welche Themen sind fuer Entwickler besonders wichtig?
Code Review, Debugging, Webentwicklung, Testing, API-Arbeit, Refactoring, Projektstruktur und Automationen sind die wichtigsten Cluster.
Kann ich damit produktiven Code ungeprueft uebernehmen?
Nein. KI-Ausgaben muessen getestet und fachlich geprueft werden. Prompts verbessern den Prozess, ersetzen aber keine technische Verantwortung.