Converter Protótipos HTML em Componentes React
Protótipos de design muitas vezes demoram demais para serem reconstruídos manualmente. Esta skill orienta Claude, Codex e Claude Code pela análise, scaffolding e validação de componentes React.
Pare e solicite confirmação antes de instalar.
Revise o plano e obtenha o consentimento explícito do usuário antes de alterar arquivos.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "design-to-production" from https://skillstore.io/skills/ariegoldkin-design-to-production.md and its manifest at https://skillstore.io/api/skills/ariegoldkin-design-to-production/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "design-to-production". Um protótipo HTML de painel de dicas com cards de vidro e botões de revelação.
Resultado esperado:
Usando "design-to-production". Uma seção de estatísticas de landing page usando cards glassmorphism e uma grid.
Resultado esperado:
Usando "design-to-production". Um componente existente que foi gerado a partir de um protótipo.
Resultado esperado:
All 121 static matches are false positives from documentation syntax, expected hidden install paths, quoted shell substitutions, or fixed directory anchors. Semantic review found an arbitrary file-creation risk in the scaffolder and unrestricted local input paths in two scripts. No prompt injection, network activity, credential access, or exfiltration intent was found.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/ariegoldkin-design-to-production?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/ariegoldkin-design-to-production?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ariegoldkin-design-to-production/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/ariegoldkin-design-to-production.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ArieGoldkin. (2026). design-to-production security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9@techreport{ariegoldkin-ariegoldkin-design-to-production-2026,
author = {ArieGoldkin},
title = {design-to-production security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9},
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-to-production security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "ArieGoldkin"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9"
identifiers:
- type: other
value: "skillstore:ariegoldkin-design-to-production:audit:9"
description: "Skillstore immutable audit report identifier"
Converta um protótipo HTML aprovado em um componente React tipado com estrutura e estilo consistentes.
Mapeie botões, cards, inputs, badges e layouts repetidos para padrões shadcn/ui aprovados.
Execute verificações locais de validação para contagem de linhas, nomes de interfaces, uso de any, classes e importações.
Converta este protótipo HTML em um componente React usando o fluxo de trabalho design-to-production. Use o mapeamento padrão, a menos que uma decisão precise da minha aprovação.
Analise este protótipo e liste o nome do componente, o módulo de destino, os mapeamentos shadcn/ui, as props e as classes glassmorphism antes do scaffolding.
Gere o scaffolding de um componente React TypeScript para este protótipo, preserve as classes glassmorphism aprovadas e depois execute a checklist de validação.
Converta este protótipo complexo em componentes de produção. Divida seções repetidas, escolha templates, defina props e explique qualquer lógica manual que reste para mim.
Autor
ArieGoldkinLicença
MIT
Revisão da Skillstore
r2
Aviso de versão
O autor não declarou uma versão.
Referência
89edfdc710d0846129dcee6a929477b04f08052c
Atualidade da manutenção
29/07/2026
Uso
71 downloads · 273 visualizações
Estrutura de arquivos
Criar Registros de Decisão de Arquitetura
Decisões de arquitetura são difíceis de preservar depois que as equipes seguem em frente. Esta skill fornece modelos, exemplos e verificações de revisão para ADRs claros.
Projete Contratos de API Prontos para Produção
Equipes frequentemente projetam APIs com recursos, erros e versionamento inconsistentes. Esta skill fornece padrões, checklists e templates para trabalhos com REST, GraphQL, gRPC, OpenAPI e AsyncAPI.
Refinar Ideias em Designs Práticos
Ideias iniciais de produto e técnicas frequentemente carecem de restrições claras, trade-offs e critérios de sucesso. Esta habilidade orienta Claude, Codex e Claude Code por meio de perguntas, opções e seções de design validadas.
Melhore Revisões de Código com um Playbook Estruturado
Revisões inconsistentes deixam passar defeitos e geram feedback pouco claro para os autores. Esta skill fornece checklists, formatos de comentários e modelos para revisões confiáveis de pull requests.
Projete Esquemas de Banco de Dados Confiáveis
Esquemas ruins desaceleram equipes e criam defeitos nos dados. Esta skill orienta modelos normalizados, trade-offs de NoSQL, indexação, restrições e migrações seguras.
Revisar Código em Relação aos Padrões do DevPrep
Projetos DevPrep AI precisam de padrões consistentes de TypeScript, importação, nomenclatura e arquitetura. Esta habilidade executa verificações locais e fornece orientação focada para corrigir violações de qualidade.
Crie Componentes React com Segurança de Tipos
por softaworks
O trabalho com React TypeScript frequentemente precisa de tipos precisos para eventos, hooks e rotas. Esta skill fornece padrões focados para componentes tipados, APIs do React 19 e roteamento.
Crie Recursos de Frontend Prontos para Produção
por davila7
As equipes de frontend precisam de orientações consistentes sobre React e Next.js em diferentes projetos. Esta habilidade fornece fluxos de trabalho de referência, práticas de qualidade e scripts auxiliares para análise de frontend.
Crie Aplicações Modernas com React e Next.js
por sickn33
Projetos React e Next.js frequentemente precisam de escolhas de configuração consistentes em roteamento, componentes, estilização, dados, formulários, testes e implantação. Esta habilidade oferece ao Claude, Codex e Claude Code um fluxo de trabalho baseado em fases para planejar e criar aplicações frontend modernas.
Melhorar a cobertura de testes do Playwright
por C0ntr0lledCha0s
Suites do Playwright podem se tornar instáveis quando a configuração, os localizadores e as fixtures são inconsistentes. Esta skill fornece padrões práticos para testes de navegador confiáveis, depuração e page objects reutilizáveis.
Audit NestJS Code with Evidence-Backed Findings
por amirtaherkhani
NestJS repositories can hide boundary flaws and runtime risks that lint results alone cannot reveal. This skill combines local evidence collection and semantic review into one prioritized report.
Crie aplicações Starknet com starknet.js
por internet-court
As integrações com a Starknet exigem um tratamento preciso de providers, contas, transações e taxas. Esta skill fornece ao Claude, Codex e Claude Code padrões práticos de starknet.js v9.