skills.rest
Kyonax
KyonaxCOMMUNITY
Explore all skills by this author →
Website𝕏@kyonax_on_techGitHub

dotcom-dev

Enforce Vue 3, Pug, Stylus, Vuex 4, Express, and Vitest standards for Madison Reed's website.

Updated May 3, 2024
Search Tags:#vitest#express#vue3#ssr#vuex#frontend-standards#pug
One-click install
npx skills add https://github.com/Kyonax/dot-files --skill dotcom-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dotcom-dev
Source: https://github.com/Kyonax/dot-files/tree/main/.config/doom-mac/gptel-directives/skills/dotcom-dev
Command: npx skills add https://github.com/Kyonax/dot-files --skill dotcom-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent code, onboarding friction, and UX bugs across Madison Reed's consumer website by providing clear, enforceable frontend and fullstack development standards for the entire team.

Core Features & Use Cases

  • Comprehensive Rule System: Covers Vue 3 Options API components, Pug templates, utility-first Stylus styling, Vuex 4 stores, Express routing, SSR architecture, Dynamic Yield integration, and Vitest testing conventions.
  • Context-Aware Rule Loading: Automatically matches task keywords to the relevant rule files, so developers only load the standards needed for their current work.
  • Use Case: When building a new product page component, the Skill ensures you follow the correct component structure, use approved utility classes for styling, and write tests that match the team's required patterns.

Quick Start

Use the dotcom-dev skill to build a new Vue product card component that adheres to Madison Reed's component structure, styling, and testing standards.

Frequently Asked Questions about dotcom-dev

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

FAQPage Schema
How do I standardize Vue 3 component structure for an enterprise codebase?▼

Debugging SSR hydration issues in a Vue 3 Express application requires standardizing server-side rendering patterns and architectural guardrails. This enforces correct hydration debugging conventions and prevents UX bugs during server-side state transfer to the client.

What is the best way to write Vitest tests for Vue 3 components?▼

Writing Vitest tests for Vue 3 components requires applying team testing conventions to ensure testable logic and uniform component structure. This guarantees all tests match the required patterns and align with team standards for the dotcom platform.

Does this approach support Dynamic Yield campaign integration with Vuex?▼

Yes, this approach supports Dynamic Yield campaign integration by enforcing specific architectural guardrails and standardized development patterns for the consumer website. It ensures campaign integration aligns with Vue 3, Vuex 4, and overall SSR architecture.

Why does Pug template modification require specific architectural guardrails?▼

Pug template modification requires architectural guardrails to prevent inconsistent code and UX bugs across the consumer website. Enforcing strict template modification rules ensures utility-first Stylus styling compliance and maintains team development standards.

Can I use Express routing configuration without breaking SSR hydration?▼

Configuring Express routing without breaking SSR hydration requires applying standardized architectural guardrails and development patterns. This ensures server-side rendering routes align correctly with Vue 3 components and Vuex 4 state management.

Related Skills

Explore More Software Engineering Skills→
samhvw8samhvw8
10

frontend-dev-guidelines

Automates frontend development across React 18+, Vue 3, Svelte 5, and Angular frameworks.

Community
Basic
vietlinhh02vietlinhh02

Vitest

Run Vitest unit, integration, and React component tests with mocking and coverage analysis.

Community
Intermediate
KyonaxKyonax

madisonreed-dev

Enforce Madison Reed's design system standards across Vue, Pug, and Dynamic Yield templates.

Community
Intermediate
peopledearpeopledear
1

Frontend Components

Enforce frontend component coding standards in Claude Code workflows.

Official
Basic