Skip to content

スキルを検索.../

Agent Skill Search Engine

検索

検索
カテゴリ
職業

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Skill ファイル

Frontend Dev

Frontend development skill for the Francesco Luchino art portfolio. Use when building Astro components, CSS styles, vanilla JS, masonry layout, lightbox, or filters. Knows project conventions: Astro islands, CSS columns, PhotoSwipe v5, dark theme, progressive blur-up, Italian UI labels.

S1M0N380 スター2026/04/12

職業
カテゴリ: CMS・プラットフォーム

スキル内容

Frontend Development — Art Portfolio

Tech Stack

Astro — static site, zero JS by default, islands architecture
CSS columns + vanilla JS — masonry layout with proportional sizing
PhotoSwipe v5 — lightbox (pinch-to-zoom, swipe navigation)
Vanilla CSS — custom properties, dark theme, no frameworks
Vanilla JS — client-side filtering, Intersection Observer lazy loading

Project Structure

See AGENTS.md for full structure. Key files:

src/components/ — Astro components (Gallery, PaintingCard, Lightbox, FilterPanel, Header)
src/scripts/ — Client-side JS (masonry.js, lightbox.js, filters.js)
src/styles/global.css — Dark theme, variables, typography
src/pages/ — index.astro (gallery), artista.astro (about), critica.astro (reviews)

関連 Skill

クイックインストール

Frontend Dev

npx skillvault add S1M0N38/s1m0n38-art-pi-skills-frontend-dev-skill-md

Skill をダウンロードリポジトリを開く

作者: S1M0N38
スター: 0
更新日: 2026/04/12
職業

このページの内容

01Frontend Development — Art Portfolio

Conventions

Keep JS minimal — Astro islands only where interactivity is needed
No images in the git repo — only code and YAML metadata
Italian language for all UI labels
Dark theme: black/charcoal background, artwork commands attention
Proportional sizing: card size ∝ sqrt(normalized_area) of real painting dimensions
Progressive blur-up: 20px placeholder → full image on load
Filter logic: OR across categories

When Making Components

Check existing patterns in src/components/ and src/styles/global.css
Use Astro component syntax (.astro files)
Add CSS to global.css using existing custom properties
For interactivity, add vanilla JS to src/scripts/ and import via <script> tag
Use CDN URLs for images: https://francescoluchino-art.b-cdn.net/

Testing

Run npm run dev to start dev server (port 1234)
Use Playwright MCP for browser testing (different port than 1234)
Check responsive behavior at mobile/tablet/desktop widths
Verify dark theme contrast and image loading

Performance Targets

Lighthouse Performance > 90
LCP < 2.5s, CLS < 0.1
Lazy loading with Intersection Observer

02

Tech Stack

03Project Structure

05When Making Components

07Performance Targets

CMS・プラットフォーム

Notion

Notion API for creating and managing pages, databases, and blocks.

CMS・プラットフォーム

Prose

OpenProse VM skill pack. Activate on any `prose` command, .prose files, or OpenProse mentions; orchestrates multi-agent workflows.

自動化ツール

Coding Agent (bash-first)

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.

自動化ツール

Continuous Learning

Automatically extract reusable patterns from Claude Code sessions and save them as learned skills for future use.

アーキテクチャパターン

Security Review

在添加身份验证、处理用户输入、处理机密信息、创建API端点或实现支付/敏感功能时使用此技能。提供全面的安全检查清单和模式。

CMS・プラットフォーム

Widget Generator

Generate customizable widget plugins for the prompts.chat feed system

Frontend Dev | Skills Pool