skills.rest
getdokan
getdokanOFFICIAL
Explore all skills by this author →
Website𝕏@dokantweetsGitHub

dokan-frontend-dev

Guide Dokan frontend UI development with React, TypeScript, Vue, Tailwind, and Webpack.

286|214|Updated Jan 31, 2017
Search Tags:#typescript#frontend#react#vue#webpack#tailwind
One-click install
npx skills add https://github.com/getdokan/dokan --skill dokan-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dokan-frontend-dev
Source: https://github.com/getdokan/dokan/tree/main/.claude/skills/dokan-frontend-dev
Command: npx skills add https://github.com/getdokan/dokan --skill dokan-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need a cohesive, up-to-date guide to create and modify Dokan frontend code across React/TypeScript, Vue, and Tailwind, ensuring consistency with project conventions and build tooling.

Core Features & Use Cases

  • Provides conventions for functional React components, barrel exports, and global libraries.
  • Documents state management with @wordpress/data stores and custom hooks.
  • Covers Tailwind CSS configuration, Tailwind preflight considerations, and Webpack entry management for 80+ entries.
  • Use cases include adding a new admin component, updating stores, or adjusting webpack config for a new feature.

Quick Start

Modify or create a small React component in src/components following the barrel export conventions and Tailwind setup described above.

Frequently Asked Questions about dokan-frontend-dev

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

FAQPage Schema
How do I structure React components and barrel exports for a Dokan admin dashboard?▼

To structure React components for a Dokan admin dashboard, create functional components in src/components and use barrel export conventions. This ensures maintainability and consistency across the Dokan Lite codebase.

How does state management work with @wordpress/data stores in Dokan frontend development?▼

State management in Dokan frontend development uses @wordpress/data stores and custom hooks. This mechanism handles global state and localized data for React components within the admin interface.

What is the best way to configure Tailwind CSS preflight when working with Vue 2.7 and React?▼

Configuring Tailwind CSS preflight for Vue 2.7 and React requires specific considerations to prevent style conflicts. Conventions guide setup to ensure consistent styling across both modern and legacy Vue codebases.

How do I manage Webpack entries for a large frontend project with 80+ build targets?▼

Managing Webpack entries for 80+ build targets involves updating webpack configurations according to Dokan project conventions. This tooling setup ensures correct bundling for new admin features across the application.

Can I use TypeScript with both modern React and legacy Vue 2.7 codebases in Dokan?▼

Yes, you can use TypeScript with both modern React and legacy Vue 2.7 codebases in Dokan. Conventions cover component structure, hooks, and stores to ensure type safety across both environments.

Related Skills

Explore More Software Engineering Skills→
getdokangetdokan
286

dokan-dev-cycle

Guide and automate Dokan plugin tests, linting, builds, and CI workflows.

Official
Advanced
LeoyishouLeoyishou
27

deploy-static

Deploy static websites to Vercel and Cloudflare Pages with one command.

Community
Intermediate
megahomewebmegahomeweb

tailwind-patterns

Enforce Tailwind CSS patterns and theming across the MegaHome UI.

Community
Intermediate
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced