frontend-dev

Develop UI features and components for the AstroJS Progressive Web App.

2|Updated Jun 7, 2025
One-click install
npx skills add https://github.com/archetypal-cz/bashkirtseff --skill frontend-dev-archetypal-cz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/archetypal-cz/bashkirtseff/tree/main/.claude/skills/frontend-dev
Command: npx skills add https://github.com/archetypal-cz/bashkirtseff --skill frontend-dev-archetypal-cz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the need for developing and maintaining the user-facing Progressive Web Application for the Marie Bashkirtseff diary project, ensuring a seamless and engaging reading experience.

Core Features & Use Cases

  • UI Development: Build new features, components, and pages for the AstroJS PWA.
  • Bug Fixing: Resolve layout issues, interactive component bugs, and performance problems.
  • Reading Experience Enhancement: Improve navigation, theme options, and content presentation.
  • Use Case: Implement a new "Continue Reading" feature that remembers the user's last read entry and links directly to it.

Quick Start

Use the frontend-dev skill to add a new Vue component for displaying footnote popovers.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I build a PWA with AstroJS and Vue 3 islands?▼

To build a PWA with AstroJS and Vue 3 islands, you develop static site layouts and integrate interactive Vue components. This approach ensures a performant, multi-language reading experience while maintaining PWA capabilities for offline access.

How do I add a Vue component to an AstroJS PWA?▼

Adding a Vue component to an AstroJS PWA involves creating the Vue 3 island and integrating it into your page layout. You can build UI features like footnote popovers to enhance the interactive reading experience without losing static site performance.

How can I improve the reading experience in a multi-language web app?▼

Improving the reading experience in a multi-language web app requires enhancing navigation, theme options, and content presentation. Using AstroJS with Tailwind CSS allows you to build features like a "Continue Reading" function that remembers the last read entry.

Does AstroJS support Tailwind CSS for UI development?▼

AstroJS supports Tailwind CSS for UI development, allowing you to style components and layouts efficiently. Integrating Tailwind CSS with Vue 3 islands helps resolve layout issues and ensures a seamless presentation across the PWA.

How do I fix layout issues in a Vue 3 island within an AstroJS project?▼

Fixing layout issues in a Vue 3 island within an AstroJS project involves debugging the interactive component's styling and structure. Using Tailwind CSS alongside AstroJS helps isolate and resolve these UI bugs to maintain a seamless reading experience.

What is the best way to enhance navigation for a PWA reading experience?▼

The best way to enhance navigation for a PWA reading experience is to implement features that track user progress. Building a "Continue Reading" component with Vue 3 and AstroJS directly links users to their last read diary entry.