技能 writing-page-layout
📦

writing-page-layout

安全

Crear diseños de página Next.js

Escribir diseños de página en Next.js puede llevar a una estructura de proyecto inconsistente y código difícil de mantener. Esta habilidad proporciona directrices claras para crear diseños de página modulares y bien organizados siguiendo las mejores prácticas de Next.js.

支援: Claude Codex Code(CC)
📊 69 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「writing-page-layout」。 Create a page layout for a user profile page

預期結果:

Un archivo page.tsx modular con menos de 40 líneas que importa tipos del directorio de tipos y sigue las convenciones de Next.js.

正在使用「writing-page-layout」。 Create an about page layout

預期結果:

Un archivo page.tsx limpio y minimalista con el componente de página y exportación de metadatos básica, manteniendo todos los tipos separados.

安全審計

安全
v1 • 1/23/2026

All static findings are false positives. This skill contains only documentation (SKILL.md) with no executable code. Backticks flagged as 'shell command execution' are markdown inline code formatting. No cryptographic algorithms present. Safe for publication.

1
已掃描檔案
15
分析行數
2
發現項
1
審計總數
中風險問題 (2)
False Positive: Markdown Code Formatting
Backticks at SKILL.md:8 and SKILL.md:14 are markdown inline code formatting for file paths, not Ruby/shell command execution.
False Positive: Cryptographic Algorithm Detection
Scanner flagged 'weak cryptographic algorithm' at SKILL.md:3. No crypto code exists in this file.
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
22
社群
95
安全
91
規範符合性

你能建構什麼

Inicio rápido para nuevas páginas Next.js

Obtenga orientación inmediata sobre la creación de diseños de página bien estructurados al iniciar una nueva página en su proyecto Next.js.

Hacer cumplir los estándares de código del equipo

Asegúrese de que todos los miembros del equipo creen páginas con estructura consistente y separación adecuada de responsabilidades.

Refactorizar páginas existentes

Úselo como lista de verificación para refactorizar y mejorar los diseños de página existentes para una mejor modularidad y organización.

試試這些提示

Diseño de página básico
Use la habilidad writing-page-layout para crear un diseño de página para una nueva página en mi aplicación Next.js.
Diseño de página con tipos TypeScript
Use la habilidad writing-page-layout para crear un diseño de página que incluya definiciones de tipo TypeScript adecuadas.
Diseño de página optimizado
Use la habilidad writing-page-layout para crear un diseño de página optimizado considerando rendimiento y mantenibilidad.
Página con convenciones personalizadas
Use la habilidad writing-page-layout para crear un diseño de página siguiendo las convenciones de mi proyecto en src/app/pages.

最佳實務

  • Mantenga los diseños de página por debajo de 40 líneas para mejor legibilidad y mantenibilidad
  • Extraiga todos los tipos e interfaces a un archivo de tipos separado en src/app/types
  • Siga las convenciones del directorio de aplicaciones Next.js para la organización de componentes

避免

  • Colocar todos los tipos e interfaces directamente en el archivo de página
  • Crear diseños de página que excedan las 40 líneas sin modularización clara
  • Mezclar lógica de negocio con componentes de presentación en archivos de página

常見問題

¿Qué hace realmente esta habilidad?
Esta habilidad proporciona instrucciones y directrices para escribir diseños de página bien estructurados en Next.js. No genera código ni ejecuta comandos.
¿Necesito experiencia en programación para usar esta habilidad?
Se recomienda familiaridad básica con Next.js y TypeScript para aplicar las directrices de manera efectiva.
¿Esta habilidad modifica mis archivos?
No. Esta habilidad solo proporciona orientación a través de prompts. No lee, escribe ni modifica ningún archivo.
¿Puedo usar esto con JavaScript puro?
Las directrices se centran en patrones de TypeScript. Para proyectos JavaScript, adapte la orientación de separación de tipos según sea necesario.
¿Cuál es la recomendación del límite de 40 líneas?
Esta es una directriz para fomentar el diseño modular. Las páginas complejas pueden necesitar más líneas pero deben permanecer bien organizadas.
¿Esto funciona con el Pages Router?
La habilidad se enfoca en la estructura del App Router (archivos page.tsx). Para Pages Router, aplican principios similares pero adapte a los patrones pages/index.js.

開發者詳情

檔案結構

📄 SKILL.md