CommunityBildgithub.com

am-will/frontend-responsive-design-standards

Erstelle responsive, mobile-first Layouts mit fließenden Containern, flexiblen Einheiten, Media Queries und touchfreundlichem Design, das auf allen Bildschirmgrößen funktioniert.

Was ist frontend-responsive-design-standards?

Diese Skill-Datei definiert Standards für responsives Frontend-Design mit einem Mobile-First-Ansatz. Sie ist für Entwickler gedacht, die UI-Layouts, Raster, Breakpoints, mobile Navigationen oder Schnittstellen erstellen oder anpassen, die sich an verschiedene Bildschirmgrößen anpassen müssen. Die Skill unterstützt die Arbeit mit responsive CSS, Media Queries, Viewport-Einstellungen, Flexbox/Grid-Layouts, Mobile-First-Styling, Breakpoint-Definitionen (Mobil, Tablet, Desktop), Touch-Target-Größen, relativen Einheiten (rem, em, %) sowie Bildoptimierung und Tests auf mehreren Geräten. Sie ist plattformunabhängig und kann in Tools wie Claude Code, Cursor oder Codex verwendet werden, um konsistente und adaptive Layouts zu erstellen. Der Fokus liegt auf fließenden Containern, flexiblen Einheiten und touchfreundlichem Design, um eine optimale Benutzererfahrung auf allen Geräten zu gewährleisten.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/am-will/codex-skills/tree/main/skills/frontend-responsive-design-standards

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

ChatGPT Claude Gemini Grok Perplexity DeepSeek

Dokumentation

Was macht frontend-responsive-design-standards?

Erstelle responsive, mobile-first Layouts mit fließenden Containern, flexiblen Einheiten, Media Queries und touchfreundlichem Design, das auf allen Bildschirmgrößen funktioniert. Verwende diese Skill beim Erstellen oder Anpassen von UI-Layouts, responsive Rastern, Breakpoint-Stilen, mobilen Navigationen oder jeder Schnittstelle, die sich an verschiedene Bildschirmgrößen anpassen muss. Wende sie an bei der Arbeit mit responsive CSS, Media Queries, Viewport-Einstellungen, Flexbox/Grid-Layouts, Mobile-First-Styling, Breakpoint-Definitionen (Mobil, Tablet, Desktop), Touch-Target-Größen, relativen Einheiten (rem, em, %), Bildoptimierung für verschiedene Bildschirme oder beim Testen von Layouts auf mehreren Geräten. Verwende sie für jede Aufgabe, die Multi-Device-Unterstützung, responsive Designmuster oder adaptive Layouts betrifft.

Individual skills in this repo

This repo contains 17 individual skills — each has its own dedicated page.

am-will/agent-browser

A fast Rust-based headless browser automation CLI with Node.js fallback that enables AI agents to navigate, click, type, and snapshot pages via structured commands.

am-will/context7

Fetch up-to-date library documentation via Context7 CLI. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User asks about library APIs, patterns, or best practices (3) Implementing features that rely on third-party packages (4) Debugging library-specific issues (5) Need current documentation beyond training data cutoff (6) AND MOST IMPORTANTLY, when you are installing dependencies, libraries, or frameworks you should ALWAYS check the docs to see what the latest versions are. Do not rely on outdated knowledge. Always prefer this over guessing library APIs or using outdated knowledge.

am-will/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

am-will/gemini-computer-use

Build and run Gemini 2.5 Computer Use browser-control agents with Playwright. Use when a user wants to automate web browser tasks via the Gemini Computer Use model, needs an agent loop (screenshot → function_call → action → function_response), or asks to integrate safety confirmation for risky UI actions.

am-will/llm-council

Orchestrate a configurable, multi-member CLI planning council (Codex, Claude Code, Gemini, OpenCode, or custom) to produce independent implementation plans, anonymize and randomize them, then judge and merge into one final plan. Use when you need a robust, bias-resistant planning workflow, structured JSON outputs, retries, and failure handling across multiple CLI agents.

am-will/markdown-url

Route any website you need to visit through markdown.new by prefixing the URL. **WHEN TO USE:** - You would normally open a website link to read content (docs, blog posts, changelogs, GitHub issues, etc.) - You need a cleaner, Markdown-friendly view for copying notes or summarizing

am-will/openai-docs-skill

Query the OpenAI developer documentation via the OpenAI Docs MCP server using CLI (curl/jq). Use whenever a task involves the OpenAI API (Responses, Chat Completions, Realtime, etc.), OpenAI SDKs, ChatGPT Apps SDK, Codex, MCP integrations, endpoint schemas, parameters, limits, or migrations and you need up-to-date official guidance.

am-will/parallel-task

Only to be triggered by explicit /parallel-task commands.

am-will/parallel-task-spark

Only to be triggered by explicit /parallel-task-spark commands.

am-will/plan-harder

Use when user specfically says 'plan harder'.

am-will/planner

Create comprehensive, phased implementation plans with sprints and atomic tasks. Use when user says: "make a plan", "create a plan", "plan this out", "plan the implementation", "help me plan", "design a plan", "draft a plan", "write a plan", "outline the steps", "break this down into tasks", "what's the plan for", or any similar planning request. Also triggers on explicit "/planner" or "/plan" commands.

am-will/read-github

Read and search GitHub repository documentation via gitmcp.io MCP service. **WHEN TO USE:** - User provides a GitHub URL - User mentions a specific repo in owner/repo format - User asks "what does this repo do?", "read the docs for X repo", or similar - User wants to search code or docs within a repo

am-will/role-creator

Create and update Codex custom agents using standalone custom-agent TOML files.

am-will/super-swarm-spark

Only to be triggered by explicit super-swarm-spark commands.

am-will/swarm-planner

[EXPLICIT INVOCATION ONLY] Creates dependency-aware implementation plans optimized for parallel multi-agent execution.

am-will/tdd-test-writer

Writes failing tests first for test-driven development and hands off a strict implementation contract that requires agents to make those tests pass without weakening the tests. Use when users ask for test-first workflows, RED/GREEN cycles, or behavior-gating tasks with automated tests.

am-will/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.