Crear componentes de UI de Paperclip consistentes
El trabajo de UI en Paperclip puede desviarse cuando los componentes, tokens y diseños se crean de forma ad hoc. Esta habilidad proporciona a Claude, Codex y Claude Code una guía de diseño compartida para una implementación frontend consistente.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "design-guide" from https://skillstore.io/skills/getpaperclipai-design-guide.md and its manifest at https://skillstore.io/api/skills/getpaperclipai-design-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Usando "design-guide". Revisar un nuevo componente de fila de issue para Paperclip.
Resultado esperado:
La respuesta identifica EntityRow como el patrón base correcto, requiere StatusIcon antes de PriorityIcon y recomienda StatusBadge en el slot final.
Usando "design-guide". Planificar tarjetas de métricas de dashboard para una página de agentes.
Resultado esperado:
La respuesta recomienda MetricCard en una cuadrícula responsive de cuatro columnas, con tokens semánticos, sombras pequeñas y tipografía establecida para valores y etiquetas.
Usando "design-guide". Actualizar la guía de diseño después de agregar un selector reutilizable.
Resultado esperado:
La respuesta enumera la sección de la guía de diseño que se debe agregar, las variantes que se deben mostrar, los estados interactivos que se deben incluir y los campos del índice de componentes que se deben actualizar.
Reviewed all 84 static findings in SKILL.md and references/component-index.md. The findings are false positives caused by markdown inline code, TSX examples, CSS class names, file paths, and responsive grid guidance. No prompt injection, data exfiltration, command execution intent, or malicious instructions were found.
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
https://skillstore.io/skills/getpaperclipai-design-guide/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/getpaperclipai-design-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/getpaperclipai-design-guide.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>getpaperclipai. (2026). design-guide security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/getpaperclipai-design-guide/audits/3@techreport{getpaperclipai-getpaperclipai-design-guide-2026,
author = {getpaperclipai},
title = {design-guide security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/getpaperclipai-design-guide/audits/3},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-guide security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "getpaperclipai"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/getpaperclipai-design-guide/audits/3"
identifiers:
- type: other
value: "skillstore:getpaperclipai-design-guide:audit:3"
description: "Skillstore immutable audit report identifier"
Usa la guía para elegir tokens, variantes, nombres de archivo, estados y ejemplos de la guía de diseño para un nuevo componente de Paperclip.
Compara una página o función con los patrones de tipografía, layout, estado, prioridad e interacción de Paperclip.
Actualiza el índice de componentes y la página de guía de diseño cuando un patrón de UI reutilizable cambia o se expande.
Usa la habilidad design-guide para revisar mi plan para un nuevo componente de Paperclip. Revisa tokens, tipografía, variantes, ubicación de archivos y actualizaciones de la guía de diseño.
Usa la habilidad design-guide para implementar este componente de Paperclip. Sigue la composición existente de shadcn/ui, variantes CVA, uso de cn, convenciones de estado y reglas de nombres de archivos.
Usa la habilidad design-guide para refactorizar este layout de página de Paperclip. Alinéalo con la barra lateral, breadcrumb, contenido principal, panel de propiedades, espaciado y patrones responsive.
Usa la habilidad design-guide para auditar este cambio de UI en busca de desviaciones del sistema de diseño. Identifica patrones duplicados, documentación faltante, tokens inconsistentes, estados débiles y oportunidades de reutilización de componentes.
Autor
getpaperclipaiLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
a06681402992ceae98ba04d54cfd4ab004862696
Actualidad del mantenimiento
18/7/2026
Uso
1 descargas · 0 vistas
Estructura de archivos
Coordinate Paperclip Tasks and Agents
Teams need a consistent way to coordinate agent work, approvals, and task progress. This skill guides Paperclip API workflows for assignments, updates, routines, and deliverables.
Convert Plans into Executable Tasks
Plans often fail when tasks lack owners, dependencies, or clear starting conditions. This skill turns accepted Paperclip plans into a verified task graph that supports focused and parallel execution.
Manage Your Paperclip Board Operations
Managing an AI-agent company can require many API calls and scattered operational checks. This skill turns board requests into structured Paperclip workflows for onboarding, approvals, monitoring, and review.
Organize lasting memory with PARA files
Important project context is easily lost between sessions. This skill stores it in structured files and helps retrieve it later with PARA and qmd.
Create Governed Paperclip Agent Hires
Creating a new agent requires consistent configuration, a clear role charter, and the correct approval process. This skill guides Paperclip users through discovery, drafting, review, submission, and approval follow-up.
Build Accessible Tailwind Interfaces
por nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Crear interfaces coherentes para componentes principales
por sickn33
El trabajo de UI puede desviarse hacia espaciado, colores y componentes de plataforma sin procesar codificados de forma rígida. Esta skill guía a Claude, Codex y Claude Code hacia componentes principales, tokens y layouts reutilizables.
Crear interfaces shadcn/ui en Next.js
por Asmayaseen
Los equipos de React necesitan patrones de UI coherentes que funcionen con Next.js moderno. Esta skill proporciona orientación para configurar shadcn/ui, ejemplos de componentes, validación de formularios, tablas, barras laterales y patrones de modo oscuro.
Crea aplicaciones fullstack con orientación sénior
por alirezarezvani
Los proyectos fullstack suelen necesitar una configuración coherente, decisiones de arquitectura y controles de calidad. Esta skill proporciona scripts y referencias para trabajos con React, Next.js, Node.js, GraphQL y PostgreSQL.
Implementar transiciones de vista en React
por vercel-labs
Las transiciones de vista en React son fáciles de colocar incorrectamente, lo que provoca animaciones silenciosas o ruidosas. Esta skill guía las decisiones de animación de rutas, Suspense, listas y elementos compartidos.
Crear componentes React con seguridad de tipos
por softaworks
El trabajo con React TypeScript suele necesitar tipos precisos para eventos, hooks y rutas. Esta skill proporciona patrones enfocados para componentes tipados, APIs de React 19 y enrutamiento.