skills.rest
ChenyCHENYU
ChenyCHENYUCOMMUNITY
Explore all skills by this author →
Website𝕏@CHENY_ychenyGitHub

layouts/detail-page

Verify Vue detail pages for standardized layout and DOM classes.

3|Updated May 1, 2026
Search Tags:#layout#vue#component structure#ui standards#read-only page
One-click install
npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill layouts-detail-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layouts/detail-page
Source: https://github.com/ChenyCHENYU/wl-skills-ui/tree/main/skills/layouts/detail-page
Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill layouts-detail-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

The Skill establishes a standard structure for read-only detail pages in Vue applications, ensuring uniform layout and style adherence across projects.

Core Features & Use Cases

  • Page Structure Detection: Identifies pages that serve as detail views based on naming conventions and DOM patterns.
  • Style Alignment: Checks for proper use of .detail-page class and consistent layout with el-descriptions and el-table.
  • Issue Diagnosis & Repair: Guides fixing missing classes, improper element usage, and color inconsistencies to maintain visual and functional consistency.

Quick Start

Use the skill to verify a Vue page component to ensure it follows the detailed structure standards.

Frequently Asked Questions about layouts/detail-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a consistent read-only detail page layout in Vue?▼

A standardized Vue detail page layout requires using the `.detail-page` DOM class and aligning styles with `el-descriptions` and `el-table` to ensure uniform read-only data presentation across projects.

What is the standard structure for Vue detail pages displaying sub-tables and descriptions?▼

The standard structure for Vue detail pages combines `el-descriptions` for detailed field mapping and `el-table` for sub-tables, all wrapped within a `.detail-page` class to guarantee structural and visual consistency.

How do I fix layout inconsistencies on my Vue read-only pages?▼

Fix layout inconsistencies on Vue read-only pages by diagnosing missing `.detail-page` classes, correcting improper element usage, and aligning color schemes to match the established layout patterns.

Does this Vue detail page layout work with existing component structures?▼

Yes, the Vue detail page layout integrates with existing component structures by detecting naming conventions and DOM patterns, then guiding repairs for elements that deviate from the standard read-only format.

Why does my Vue detail page fail style alignment checks?▼

Your Vue detail page fails style alignment checks when it lacks the `.detail-page` class, uses improper elements instead of `el-descriptions`, or contains color inconsistencies that break the uniform layout pattern.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-page-header

Render reusable page header UI with title, subtitle, and action slots for Naive UI pages.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

zustand-advanced-patterns

Implement advanced Zustand patterns for managing complex React application state.

Official
Advanced
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
jiaiyanjiaiyan
8

n-descriptions

Display structured key-value data in a compact, readable layout.

Community
Intermediate