All authors
Claude Skills by V-Groups-Foundations
github.com/V-Groups-Foundations25 skills0 installs0 views
- AccessibilityMake web UIs accessible (WCAG 2.2 AA): semantic HTML, labels, keyboard navigation, focus management for menus and modals, ARIA only when needed, color contrast ratios, alt text, motion, and testing with the keyboard and axe-core. Use when the user asks about accessibility, a11y, screen readers, keyboard support, contrast or WCAG, and when reviewing any UI.Votes: 0GitHub stars: 6
- Android AppTurn a website into a native Android app (APK) with V-Run's Publish → Android app, and use what a web page can't: scanning nearby Wi-Fi networks for indoor positioning — which floor or room someone is on — through window.VRunWifi.scan(). Use when the user wants an Android app, an APK, to install the app on their phone, Wi-Fi scanning, indoor or floor detection, or anything a browser page is not allowed to do on a phone.Votes: 0GitHub stars: 6
- Api IntegrationIntegrate third-party APIs (Stripe, OpenAI, GitHub, weather, maps, any REST/JSON service): read the docs, keep keys in env, a typed client wrapper, timeouts, retries with backoff for 429/5xx, pagination, webhook signature verification, caching and showing errors in the UI. Use when the user asks to connect to, call, fetch from, or integrate an external API, SDK or webhook.Votes: 0GitHub stars: 6
- Auth SecurityImplement authentication and authorization securely: password hashing with argon2/bcrypt, sessions vs JWT, secure cookies, CSRF, OAuth via Auth.js or Passport, rate limiting, server-side role checks and secret management. Use when the user asks for login, signup, accounts, auth, OAuth/social login, permissions, roles or securing an app.Votes: 0GitHub stars: 6
- Backend ApiDesign and build a REST/JSON API with Node (Express or Fastify) or Python (FastAPI): layout, routes, validation with zod or pydantic, error format, status codes, pagination, CORS, config, logging and testing with Invoke-RestMethod/curl. Use when the user asks for a backend, server, API, endpoints or CRUD service.Votes: 0GitHub stars: 6
- Browser GameBuild small browser games with HTML5 canvas (or Phaser 3 for bigger ones): game loop with requestAnimationFrame and delta time, keyboard/mouse/touch input, collision, game states (menu, play, pause, game over), score and localStorage high score, sound and mobile controls. Use when the user asks for a game, arcade clone (snake, pong, breakout, flappy, platformer, shooter) or anything interactive and playable.Votes: 0GitHub stars: 6
- Dashboard UiBuild admin and analytics dashboards: sidebar/topbar layout, KPI tiles, data tables with sort, filter and pagination, Chart.js charts and choosing the right chart, loading/empty/error states, responsive behavior and dark theme. Use when the user asks for a dashboard, admin panel, analytics page, back office or reporting UI.Votes: 0GitHub stars: 6
- Data VisualizationMake charts that communicate: choose the chart from the question (comparison, trend, distribution, part-to-whole, relationship), build it with Chart.js or D3 from a CDN, label it directly, use color sparingly and accessibly, make it responsive and remove chart junk. Use when the user asks for a chart, graph, plot, visualization, infographic or to visualize data.Votes: 0GitHub stars: 6
- Database DesignDesign database schemas and run migrations safely: SQLite vs Postgres, tables, keys, normalization, indexes, constraints, timestamps, soft delete, Prisma or Drizzle (Node) or SQLAlchemy + Alembic (Python), seeding, and never losing data. Use when the user asks for a database, schema, tables, models, migrations, ORM setup or data storage.Votes: 0GitHub stars: 6
- DebuggingDebug systematically: read the error, reproduce, locate, form one hypothesis, test it cheaply, fix the root cause and verify, with common Node, Python and browser error patterns and using logs and the browser console via inspect_preview. Use when something is broken, crashes, throws an error, shows a blank page, fails a test or behaves unexpectedly.Votes: 0GitHub stars: 6
- Docker DeployContainerize and deploy apps: Dockerfile best practices (multi-stage, slim base, non-root, .dockerignore), docker compose for app + database, env and secrets, health checks, and deploying to Render, Railway, Fly.io or Vercel with a go-live checklist. Use when the user asks to dockerize, containerize, deploy, host, publish or put an app online.Votes: 0GitHub stars: 6
- Frontend UiBuild and redesign websites and web app interfaces that look professionally designed: visual direction, color palette and theme, layout, spacing and type scales, components and interaction states, forms, responsive breakpoints, dark mode, icons, imagery and accessibility basics, in plain HTML + Tailwind CDN or React. Use when the user asks to build, style, redesign, restyle, modernize or polish a site, app, page, component, form, card, navbar or modal, change its colors or layout, or make it ...Votes: 0GitHub stars: 6
- Git WorkflowUse git well: review status and diff before committing, small focused commits with good messages, branches, .gitignore, undoing safely (restore, revert vs reset), never force-pushing shared branches, resolving merge conflicts, and GitHub CLI for pull requests. Use when the user asks to commit, push, branch, merge, undo a commit or revert git history, fix a conflict, or open a PR — not to undo your own last reply in this chat (that is undo_last_reply).Votes: 0GitHub stars: 6
- Html VideoMake a video as an animated HTML page — explainers, product promos, intros, title sequences, animated charts, social clips — and export it to an MP4 file. Use whenever the user asks for a video, animation, motion graphics, intro or trailer.Votes: 0GitHub stars: 6
- Landing PageBuild a high-converting marketing landing page: choosing a structure, headline/subhead/CTA copy, social proof, features, pricing, FAQ, final CTA, a distinct visual direction, imagery, mobile and speed. Use when the user asks for a landing page, homepage, product page, marketing site, waitlist or launch page.Votes: 0GitHub stars: 6
- Nextjs AppBuild Next.js apps with the App Router: server vs client components, routes and layouts, route handlers, server actions, data fetching and caching, metadata/SEO, images, env vars and deploying. Use when the user asks for a Next.js app or site, or works in a project with next in package.json.Votes: 0GitHub stars: 6
- Python ProjectSet up and structure Python apps and scripts on Windows: virtual environments, requirements.txt or pyproject.toml, src layout, type hints, logging, CLIs with argparse or Typer, config from env, and running and testing with pytest. Use when the user asks for a Python script, tool, CLI, bot, automation or Python project setup.Votes: 0GitHub stars: 6
- React AppCreate and structure a React single-page app with Vite and TypeScript: scaffolding, folder structure, state (useState, useReducer, Zustand), data fetching, routing with react-router, forms, env vars, build and preview. Use when the user asks for a React app, SPA, Vite project or React frontend (not Next.js).Votes: 0GitHub stars: 6
- RefactoringRefactor code safely without changing behavior: tests first, small verified steps, rename, extract, inline, move, remove duplication, simplify conditionals, and knowing when not to refactor. Use when the user asks to clean up, refactor, restructure, simplify, reorganize or split code.Votes: 0GitHub stars: 6
- SeoTechnical SEO for websites: titles and meta descriptions, Open Graph and Twitter cards, canonical URLs, heading structure, JSON-LD structured data, sitemap.xml, robots.txt, clean URLs, indexability, performance and mobile. Use when the user asks for SEO, search ranking, Google indexing, social share previews, meta tags or a sitemap.Votes: 0GitHub stars: 6
- Svg GraphicsCreate SVG graphics by hand: icons, logos, illustrations, patterns and backgrounds, using viewBox, simple geometric construction, paths, gradients, patterns, stroke vs fill, optimization, inline vs file use, and animating SVG with CSS. Use when the user asks for an icon, logo, illustration, vector graphic, decorative background, wave/blob divider or SVG animation.Votes: 0GitHub stars: 6
- TestingWrite tests that catch real bugs: choosing unit, integration or end-to-end tests, Vitest/Jest for JavaScript, pytest for Python, Playwright for browser e2e, arrange-act-assert, naming, fixtures, mocking only boundaries, and running and reading failures. Use when the user asks to add tests, fix failing tests, set up a test framework or verify behavior.Votes: 0GitHub stars: 6
- Threejs 3dBuild 3D web scenes with three.js: importmap setup with a pinned CDN version, scene/camera/renderer, lights, PBR materials, loading GLTF/GLB models, OrbitControls, the animation loop, responsive resize, performance, plus product viewer and animated hero background patterns. Use when the user asks for 3D, three.js, WebGL, a 3D model viewer, rotating product, 3D hero or interactive 3D scene.Votes: 0GitHub stars: 6
- Web AnimationMotion design for websites and app UIs: when to animate, durations and easings, CSS transitions and keyframes, the Web Animations API, scroll reveals with IntersectionObserver, GSAP timelines, page transitions, micro-interactions, reduced motion and performance. Use when the user asks to animate, add motion, transitions, scroll effects, hover effects or make a page feel alive.Votes: 0GitHub stars: 6
- Web PerformanceMake websites and APIs fast: images (formats, sizes, lazy loading), fonts, critical CSS, JavaScript size, caching headers, Core Web Vitals (LCP, CLS, INP) and what drives each, plus backend N+1 queries, caching and compression. Use when the user says the site is slow, asks to optimize performance, improve Lighthouse or PageSpeed scores, or reduce load time.Votes: 0GitHub stars: 6