web-interface-design

Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.

Ir para a instalação

Repositório: ratacat/claude-skills
Última atividade na origem: 20 de dezembro de 2025 às 05:07
Idioma detectado do SKILL.md: inglês
Estrelas: 49
Forks: 9

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

10 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

agent-native-audit

Run comprehensive agent-native architecture review with scored principles

2026-02-11

agent-native-reviewer

Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>

2026-02-11

ankane-readme-writer

Use this agent when you need to create or update README files following the Ankane-style template for Ruby gems. This includes writing concise documentation with imperative voice, keeping sentences under 15 words, organizing sections in the standard order (Installation, Quick Start, Usage, etc.), and ensuring proper formatting with single-purpose code fences and minimal prose. Examples: <example>Context: User is creating documentation for a new Ruby gem. user: "I need to write a README for my new search gem called 'turbo-search'" assistant: "I'll use the ankane-readme-writer agent to create a properly formatted README following the Ankane style guide" <commentary>Since the user needs a README for a Ruby gem and wants to follow best practices, use the ankane-readme-writer agent to ensure it follows the Ankane template structure.</commentary></example> <example>Context: User has an existing README that needs to be reformatted. user: "Can you update my gem's README to follow the Ankane style?" assistant: "Let...

2026-02-11

Ver todas deste repositório

name	web-interface-design
description	Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.