skills.rest
doccker
docckerCOMMUNITY
Explore all skills by this author →
GitHub

frontend-safety

Enforces safety constraints when modifying Vue and React components, layouts, and overlays.

1.0k|109|Updated Jan 4, 2026
Search Tags:#Vue#Frontend#Type Safety#css grid#component refactoring#reAct#Layout
One-click install
npx skills add https://github.com/doccker/cc-use-exp --skill frontend-safety
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-safety
Source: https://github.com/doccker/cc-use-exp/tree/main/.gemini/skills/frontend-safety
Command: npx skills add https://github.com/doccker/cc-use-exp --skill frontend-safety

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend edits by AI assistants often break existing functionality: renamed props, mismatched emit events, hallucinated object properties, and broken layouts. This Skill imposes strict modification boundaries and verification checklists so component changes stay safe and consistent.

Core Features & Use Cases

  • Protected Contract Zones: Forbids changes to data bindings, props, emit events, reactive variables, API calls, and TypeScript type definitions unless explicitly requested.
  • Layout & UI Consistency Rules: Provides CSS Grid alignment patterns, capsule UI conventions, scoped/deep selector guidance, and semantic status colors for stable layouts.
  • Event & Type Contract Verification: Requires reading child component defineEmits and interface definitions before modifying listeners or accessing deep object properties, eliminating hallucinated attributes.
  • Use Case: When asking an AI to restyle a Vue admin dashboard table, the Skill ensures it only touches layout and CSS while verifying event names and type definitions before any logic-adjacent change.

Quick Start

Apply the frontend-safety rules while refactoring the layout of my Vue component UserList.vue without changing any data bindings or event names.

Frequently Asked Questions about frontend-safety

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

FAQPage Schema
How do I safely modify Vue components without breaking existing functionality?▼

Restrict changes to layout structure, CSS styles, and wrapper elements while leaving data bindings, props, emit events, reactive variables, and API calls untouched. Before editing, verify event names and type definitions by reading the related files rather than guessing.

How to prevent AI from hallucinating object properties in Vue templates?▼

Require a type contract audit: before accessing deep properties like item.config.url, read the relevant interface or type definition file to confirm the field exists. Never infer fields from intuition; add new fields to the type definitions first.

Why does my Vue inline style binding throw a syntax error?▼

Vue :style bindings use JavaScript objects, so hyphenated CSS names like white-space are invalid. Convert them to camelCase such as whiteSpace: 'nowrap' with quoted string values.

How do I fix misaligned buttons and jumping rows in table layouts?▼

Use CSS Grid with predefined grid-template-columns for rows containing multiple action points, and push action button groups to the row end with margin-left: auto. This keeps columns vertically aligned regardless of text length.

Does this approach work with React as well as Vue?▼

Yes, the protected-zone rules cover both Vue and React components, including props, event handlers, and TypeScript types. Some sections like defineEmits verification and :deep selectors are Vue-specific.

When should scoped or deep selectors be used to override third-party component styles?▼

Use a combined selector like .menu.el-menu--collapse to style the current node, and :deep(.el-menu-item) to penetrate into child component nodes. If overrides keep losing to library specificity, inline styles with !important are a permitted fallback.

Related Skills

Explore More Software Engineering Skills→
SpacePlushySpacePlushy

Global Coding Style

Enforce global coding style with Prettier, ESLint, and TypeScript strict mode.

Community
Basic
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
2zcory2zcory

api-contract-workflow

Define frontend-backend API contracts with request and response schemas.

Community
Intermediate
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate