skills.rest
pirog
pirogCOMMUNITY
Explore all skills by this author →
Website𝕏@pirogcommamikeGitHub

tanaab-frontend

Guide Vue 3, VitePress 1, and SCSS frontend implementation within the Tanaab hierarchy.

Updated Mar 6, 2026
Search Tags:#workflow#frontend#vue3#scss#design-tokens#vitepress
One-click install
npx skills add https://github.com/pirog/me --skill tanaab-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanaab-frontend
Source: https://github.com/pirog/me/tree/main/skills/tanaab-frontend
Command: npx skills add https://github.com/pirog/me --skill tanaab-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill provides structured guidance for frontend work within the Tanaab coding hierarchy, clarifying best practices for Vue 3 components, VitePress 1 static sites, and SCSS styling to accelerate consistent frontend delivery.

Core Features & Use Cases

  • Guidance on scoping frontend surfaces including Vue 3 components, app structure, state flow, design tokens, templates, and build integration.
  • Recommendations for static-site decisions such as VitePress 1 theming, site structure, and theme wiring, with guidance on subthemes for branding consistency.
  • Clear workflow alignment and cross-skill collaboration with related components like tanaab-coding-core, tanaab-documentation, and tanaab-testing to ensure quality and consistency.

Quick Start

Confirm tanaab-coding-core is active, scope the frontend surface (Vue 3 components, app structure, state flow, SCSS design tokens), choose VitePress 1 for the static-site surface, and apply the preferred SCSS approach.

Frequently Asked Questions about tanaab-frontend

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

FAQPage Schema
How do I structure Vue 3 components and SCSS design tokens for a new project?▼

Vue 3 components and SCSS design tokens are structured by scoping frontend surfaces, defining app structure, state flow, and build integration. This ensures consistent UI delivery and maintains clear ownership of styling architecture across the project.

What's the best way to set up VitePress 1 theming and site structure?▼

VitePress 1 theming and site structure are set up by configuring theme wiring and applying subthemes for branding consistency. This provides structured workflow guidance for building static documentation sites with reliable visual identity.

How does design-token integration work with Vue 3 and SCSS?▼

Design-token integration with Vue 3 and SCSS works by mapping token values through scoped SCSS styling into Vue 3 components. This bridges static design decisions with dynamic component rendering for consistent frontend delivery.

Do I need any specific environment setup before building Vue 3 frontend components?▼

Before building Vue 3 frontend components, you must confirm that tanaab-coding-core is active. This prerequisite establishes the foundational coding hierarchy required to properly apply the frontend workflow guidance and best practices.

Can I use this workflow guidance for both web apps and static docs sites?▼

Yes, this workflow guidance applies to both Vue 3 web apps and VitePress 1 static docs sites. It covers frontend component scoping, state flow, and static-site theming to accelerate consistent delivery across both project types.

Why align frontend implementation work with a coding hierarchy?▼

Aligning frontend implementation with a coding hierarchy ensures quality and consistency through cross-skill collaboration with documentation and testing components. This structured ownership prevents architectural drift across Vue 3 and VitePress surfaces.

Related Skills

Explore More Software Engineering Skills→
pirogpirog

tanaab-coding-core

Enforce shared coding doctrine across the Tanaab coding stack.

Community
Advanced
Orpheus-KOrpheus-K
13

lucky-ui-docs

Generate VitePress documentation, API tables, and usage examples for Lucky UI components.

Community
Intermediate
pirogpirog

tanaab-github-actions

Guide GitHub Actions workflow authoring and CI triage within the Tanaab coding structure.

Community
Advanced
dylantarredylantarre
38

vue

Build token-driven Vue 3 components with the Composition API and TypeScript.

Community
Intermediate