Diseñar interfaces frontend distintivas
Las interfaces genéricas generadas suelen verse predecibles y débiles. Esta skill guía a Claude, Codex y Claude Code hacia un diseño frontend distintivo y listo para producción.
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/atman36-frontend-design.md and its manifest at https://skillstore.io/api/skills/atman36-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
"frontend-design" 사용 중입니다. Diseña una landing page para una app de programación de horarios.
예상 결과:
Un layout editorial distintivo con una jerarquía tipográfica sólida, un sistema de color enfocado, movimiento sutil, secciones responsive y comprobaciones de accesibilidad.
"frontend-design" 사용 중입니다. Mejora una tarjeta de dashboard que se siente genérica.
예상 결과:
Una dirección de componente refinada con espaciado más claro, mayor énfasis en los datos, estados hover con propósito y un estilo visual alineado con el producto.
"frontend-design" 사용 중입니다. Crea una sección hero memorable para un portafolio.
예상 결과:
Un concepto visual audaz con tipografía personalizada, composición por capas, detalle atmosférico de fondo, tamaños responsive y pulido de producción.
All 25 static alerts are false positives caused by Markdown code fences, inline code formatting, and ordinary design terminology. The file contains frontend guidance and examples, with no shell execution, system reconnaissance, prompt injection, or other malicious intent. No security remediation is required.
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
https://skillstore.io/skills/atman36-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/atman36-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>AI-Vibe-Prompts. (2026). frontend-design security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-frontend-design/audits/9@techreport{ai-vibe-prompts-atman36-frontend-design-2026,
author = {AI-Vibe-Prompts},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/atman36-frontend-design/audits/9},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 9)"
version: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/atman36-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:atman36-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
atman36-frontend-design
2026-10-25
zhanlincui-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-10-21
cesaraugustusgrob-frontend-design
2026-09-09
anthropics-frontend-design
2026-10-24
agentworkforce-frontend-design
2026-10-22
dennisliuck-frontend-design
2026-09-09
Crear una dirección visual memorable para una nueva página de producto con tipografía, color, layout y movimiento más sólidos.
Convertir un componente frontend genérico en una interfaz pulida que siga cumpliendo requisitos de accesibilidad y responsive.
Guiar a un agente de programación de IA para construir una página web que se sienta alineada con una audiencia y una oferta específicas.
Usa frontend-design para mejorar esta página. Mantén el contenido actual, pero haz que la dirección visual sea más clara y más pulida.
Usa frontend-design para crear un componente distintivo para esta función. Incluye comportamiento responsive, estados accesibles y detalles visuales refinados.
Usa frontend-design para construir una vista de app lista para producción. Elige una dirección estética audaz e implementa layout, movimiento, tipografía y comprobaciones de calidad.
Usa frontend-design para auditar esta interfaz, identificar decisiones genéricas y luego transformarla en una experiencia frontend distintiva, accesible y eficiente.
작성자
AI-Vibe-Prompts라이선스
MIT
작성자 버전
v1.0.0
Skillstore 리비전
r2
참조
89edfdc710d0846129dcee6a929477b04f08052c
유지보수 최신성
2026. 7. 26.
사용량
11 다운로드 · 307 조회
파일 구조
📄 SKILL.md
Optimizar el rendimiento de Next.js
Las aplicaciones de Next.js pueden volverse lentas por bundles grandes, caché débil y medios sin optimizar. Esta habilidad guía a Claude, Codex y Claude Code a través de mejoras de rendimiento enfocadas para apps de producción.
Analizar bases de código con informes estructurados
Los equipos necesitan una forma rápida de comprender repositorios desconocidos antes de modificarlos. Esta skill guía a Claude, Codex y Claude Code a través de comprobaciones de estructura, dependencias, arquitectura, calidad y seguridad.
Crear una estrategia de pruebas práctica
Los equipos suelen agregar pruebas sin un alcance, herramientas u objetivos de cobertura claros. Esta habilidad proporciona un plan práctico para pruebas con Vitest, Playwright y CI.
Gestiona flujos de trabajo de Git con estándares de equipo
Los equipos necesitan hábitos consistentes de commits, ramas y revisiones para mantener un historial legible. Esta skill ofrece a Claude, Codex y Claude Code una checklist práctica para el flujo de trabajo de Git.
Validar código antes del lanzamiento
Los equipos necesitan comprobaciones repetibles antes de que el código se confirme, se envíe o se despliegue. Esta skill guía a Claude, Codex y Claude Code en linting, comprobaciones de tipos, pruebas, compilaciones, auditorías y comprobaciones de commit.
Diseñar prototipos de UI distintivos
작성자 tencentcloudbase
Las interfaces de IA genéricas a menudo carecen de dirección visual y de detalles adaptados a la plataforma. Esta habilidad guía a Claude, Codex y Claude Code para definir la intención de diseño antes de crear prototipos.
Build and Refine Interfaces with Uizze
작성자 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
Implementar transiciones de vista en React
작성자 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.
Crea plantillas de correo con React Email y Resend
작성자 resend
Crear plantillas de correo listas para producción es difícil porque los clientes de correo varían. Esta skill guía a Claude, Codex y Claude Code en componentes de React Email, envío, estilos, localización y flujos de trabajo del editor.
Mejorar las prácticas de Vue 3 TypeScript
작성자 hyf0
Los proyectos de Vue TypeScript suelen encontrarse con errores confusos en plantillas, router y Volar. Esta skill ofrece correcciones específicas de Vue 3 para Codex, Claude y Claude Code.
Mejorar componentes de Vue Options API
작성자 vuejs-ai
Los proyectos de Vue Options API pueden perder seguridad de tipos y una vinculación correcta de this. Esta skill ofrece patrones directos para componentes Vue más seguros.