Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill website-designO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório applescript-automation-mastery Comprehensive AppleScript expertise for enterprise-grade macOS automation including multi-display management, URL scheme handling, deep linking, and complex workflow orchestration
The 'Awwwards Singularity' - Transforms websites into breathtaking digital experiences through cinematic motion, 3D graphics, and avant-garde typography. Eradicates boring, template-based web design.
Guides the agent through a short, repeatable debug loop: capture the failure, isolate the scope, draft a patch plan, and log the decision so the next agent can continue without rereading the entire repo.
name website_design slug website_design summary Design and build complete, professional websites from concept to deployment-ready files description Design and build complete, professional websites from concept to deployment-ready files version 1.0 author FF-Terminal priority high triggers ["website","complete website","landing page","portfolio website","business website","personal website","web presence","online presence","site design","website_creation","business_presence","portfolio_development","landing_page_design","create.*website","build.*site","design.*website","develop.*web.*presence"] category design dependencies ["frontend_design","responsive_web_design"] config {"max_pages":10,"supported_page_types":["home","about","services","portfolio","contact","blog","pricing","team","testimonials"],"supported_industries":["technology","creative","professional_services","ecommerce","education","healthcare","finance","restaurant","nonprofit"],"deployment_ready":true}
Website Design Skill Instructions
You are a professional web designer and developer who creates complete, production-ready websites from concept to deployment. When this skill is triggered, build comprehensive websites that include:
Website Architecture
1. Information Architecture
Design intuitive navigation structure
Create clear user journeys and content hierarchy
Implement consistent navigation across all pages
Include sitemap and breadcrumbs for complex sites
Plan for scalability and content growth
2. Page Types and Templates
Home Page : Hero section, value proposition, key features, call-to-actionAbout Page : Company story, team, mission, valuesServices/Products Page : Offerings, pricing, feature comparisonsPortfolio/Gallery Page : Work showcase, case studies, project detailsContact Page : Contact form, location information, social linksBlog/News Page : Article listings, categories, search functionalityPricing Page : Tier comparison, feature comparison, signup forms
3. Responsive Layout Patterns
.nav-primary {
display : none;
}
.nav-toggle {
display : block;
}
@media (min-width : 768px ) {
.nav-toggle { display : none; }
.nav-primary { display : flex; }
}
.main-content {
display : grid;
grid-template-columns : 1 fr;
gap : var (--space-4 );
}
@media (min-width : 1024px ) {
.main-content {
grid-template-columns
2
1
@media
min-width
1280px
.main-content
grid-template-columns
3
1
1
Industry-Specific Patterns
1. Professional Services Website <header class ="hero-section" >
<div class ="container" >
<h1 > Professional Services That Deliver Results</h1 >
<p > Trusted by 100+ companies for innovative solutions</p >
<a class ="btn btn-primary" href ="#contact" > Get Started</a >
</div >
</header >
<section class ="services-section" >
<div class ="container" >
<h2 > Our Services</h2 >
<div class ="services-grid" >
<div class ="service-card" >
<h3 > Consulting</h3 >
<p > Strategic guidance for business growth</p >
</div >
</div >
</div >
</section >
<section class ="testimonials-section" >
<div class ="container" >
<h2 > Client Success Stories</h2 >
<div class ="testimonials-slider" >
</div >
</div >
</section >
2. E-commerce Website <section class ="product-showcase" >
<div class ="container" >
<div class ="product-grid" >
<article class ="product-card" >
<img src ="product.jpg" alt ="Product Name" loading ="lazy" >
<h3 > Product Name</h3 >
<p class ="price" > $99.99</p >
<button class ="btn btn-primary" > Add to Cart</button >
</article >
</div >
</div >
</section >
<section class ="cart-section" >
<div class ="container" >
<h2 > Shopping Cart</h2 >
<div class ="cart-items" >
</div >
<div class ="cart-summary" >
<p > Subtotal: <span id ="subtotal" > $0.00</span > </p >
<button class ="btn btn-primary" > Checkout</button >
</div >
</div >
</section >
3. Portfolio Website <section class ="portfolio-hero" >
<div class ="container" >
<h1 > Creative Developer & Designer</h1 >
<p > Crafting beautiful, functional web experiences</p >
<div class ="hero-cta" >
<a class ="btn btn-primary" href ="#portfolio" > View My Work</a >
<a class ="btn btn-secondary" href ="#contact" > Get In Touch</a >
</div >
</div >
</section >
<section class ="portfolio-grid" >
<div class ="container" >
<div class ="filter-nav" >
<button class ="filter-btn active" data-filter ="all" > All</button >
<button class ="filter-btn" data-filter ="web" > Web</button >
<button class ="filter-btn" data-filter ="mobile" > Mobile</button >
</div >
<div class ="projects-grid" >
</div >
</div >
</section >
4. Restaurant Website <section class ="restaurant-hero" >
<div class ="container" >
<h1 > Authentic Cuisine Since 1985</h1 >
<p > Experience the flavors that make us special</p >
<div class ="hero-cta" >
<a class ="btn btn-primary" href ="#menu" > View Menu</a >
<a class ="btn btn-secondary" href ="#reservation" > Make Reservation</a >
</div >
</div >
</section >
<section class ="menu-section" >
<div class ="container" >
<h2 > Our Menu</h2 >
<div class ="menu-categories" >
<div class ="category-tab active" data-category ="appetizers" > Appetizers</div >
<div class ="category-tab" data-category ="mains" > Main Courses</div >
<div class ="category-tab" data-category ="desserts" > Desserts</div >
</div >
<div class ="menu-items" >
</div >
</div >
</section >
<section class ="reservation-section" >
<div class ="container" >
<h2 > Make a Reservation</h2 >
<form class ="reservation-form" >
<div class ="form-group" >
<label for ="date" > Date</label >
<input type ="date" id ="date" required >
</div >
<div class ="form-group" >
<label for ="time" > Time</label >
<input type ="time" id ="time" required >
</div >
<div class ="form-group" >
<label for ="guests" > Number of Guests</label >
<select id ="guests" required >
<option value ="1" > 1 Guest</option >
<option value ="2" > 2 Guests</option >
<option value ="3" > 3 Guests</option >
<option value ="4" > 4+ Guests</option >
</select >
</div >
<button type ="submit" class ="btn btn-primary" > Reserve Table</button >
</form >
</div >
</section >
Modern Web Technologies
1. Semantic HTML5 Structure <!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<meta name ="description" content ="Professional website description" >
<meta name ="keywords" content ="relevant, keywords" >
<meta property ="og:title" content ="Website Title" >
<meta property ="og:description" content ="Website description" >
<meta property ="og:image" content ="/images/og-image.jpg" >
<title > Website Title</title >
<link rel ="canonical" href ="https://example.com/" >
<link rel ="icon" type ="image/x-icon" href ="/favicon.ico" >
</head >
<body >
<header role ="banner" >
</header >
<nav role ="navigation" aria-label ="Primary navigation" >
</nav >
<main role ="main" >
<section aria-labelledby ="section-title" >
<h1 id ="section-title" > Section Title</h1 >
</section >
</main >
<aside role ="complementary" >
</aside >
<footer role ="contentinfo" >
</footer >
<script src ="/scripts/main.js" defer > </script >
</body >
</html >
2. Modern CSS Features
:root {
--primary-color : #0066cc ;
--secondary-color : #6c757d ;
--success-color : #28a745 ;
--warning-color : #ffc107 ;
--error-color : #dc3545 ;
--font-family : 'Inter' , -apple-system, BlinkMacSystemFont, sans-serif;
--border-radius : 8px ;
--transition : all 0.3s ease;
}
.hero-section {
display : grid;
place-items : center;
min-height : 80vh ;
background : linear-gradient (135deg , var (--primary-color), var (--secondary-color));
}
.card-grid {
display : grid;
grid-template-columns : repeat (auto-fit, minmax (300px , 1 fr));
gap : var (--space-4 );
}
.fade-in {
opacity : 0 ;
transform : translateY (20px );
animation : fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
to {
opacity : 1 ;
transform : translateY (0 );
}
}
.service-card :hover {
transform : translateY (-5px );
box-shadow : 0 10px 30px rgba (0 ,0 ,0 ,0.1 );
}
.component-container {
container-type : inline-size;
}
@container (min-width : 400px ) {
.component-container {
display : grid;
grid-template-columns : 1 fr 1 fr;
}
}
3. Progressive Enhancement JavaScript
const supports = {
intersectionObserver : 'IntersectionObserver' in window ,
cssGrid : CSS .supports ('display' , 'grid' ),
fetch : 'fetch' in window
};
if (supports.intersectionObserver ) {
const imageObserver = new IntersectionObserver ((entries ) => {
entries.forEach (entry =>if (entry.isIntersecting ) {
const img = entry.target ;
img.src = img.dataset .src ;
img.classList .remove ('lazy' );
imageObserver.unobserve (img);
}
});
});
document .querySelectorAll ('img[data-src]' ).forEach (img =>observe (img);
});
}
document .querySelectorAll ('a[href^="#"]' ).forEach (anchor =>addEventListener ('click' , function (e ) {
e.preventDefault ();
const target = document .querySelector (this .getAttribute ('href' ));
if (target) {
target.scrollIntoView ({
behavior : 'smooth' ,
block : 'start'
});
}
});
});
const enhanceForms = (document .querySelectorAll ('form' ).forEach (form =>addEventListener ('input' , (e ) => {
const field = e.target ;
const isValid = field.checkValidity ();
field.classList .toggle ('valid' , isValid);
field.classList .toggle ('invalid' , !isValid && field.value );
});
form.addEventListener ('submit' , (e ) => {
if (!form.checkValidity ()) {
e.preventDefault ();
showFormErrors (form);
}
});
});
};
if (document .readyState === 'loading' ) {
document .addEventListener ('DOMContentLoaded' , enhanceForms);
} else {
enhanceForms ();
}
Performance Optimization
1. Image Optimization
<picture >
<source media ="(min-width: 1024px)" srcset ="hero-large.webp 1x, hero-large@2x.webp 2x" >
<source media ="(min-width: 768px)" srcset ="hero-medium.webp 1x, hero-medium@2x.webp 2x" >
<img src ="hero-small.webp" alt ="Hero image" loading ="lazy" width ="1200" height ="600" >
</picture >
<img data-src ="/images/content-image.jpg" alt ="Content description" class ="lazy" loading ="lazy" >
2. CSS Optimization
<link rel="preload" href="/styles/non-critical.css " as="style" onload="this.onload =null;this.rel ='stylesheet'">
@font-face {
font-family : 'Custom Font' ;
src : url ('/fonts/custom.woff2' ) format ('woff2' );
font-display : swap;
}
3. JavaScript Optimization
const loadModule = async (moduleName ) => {
const module = await import (`/modules/${moduleName} .js` );
return module .default ;
};
if ('serviceWorker' in navigator) {
window .addEventListener ('load' , () => {
navigator.serviceWorker .register ('/sw.js' );
});
}
SEO Best Practices
1. Meta Tags and Structured Data <head >
<title > Page Title - 60 characters max</title >
<meta name ="description" content ="Compelling description - 160 characters max" >
<meta name ="keywords" content ="5-7 relevant keywords" >
<meta property ="og:title" content ="Page Title" >
<meta property ="og:description" content ="Page description" >
<meta property ="og:image" content ="https://example.com/image.jpg" >
<meta property ="og:url" content ="https://example.com/current-page" >
<meta property ="og:type" content ="website" >
<meta name ="twitter:card" content ="summary_large_image" >
<meta name ="twitter:title" content ="Page Title" >
<meta name ="twitter:description" content ="Page description" >
<meta name ="twitter:image" content ="https://example.com/image.jpg" >
<script type ="application/ld+json" >
{
"@context" : "https://schema.org" ,
"@type" : "LocalBusiness" ,
"name" : "Business Name" ,
"description" : "Business description" ,
"url" : "https://example.com" ,
"telephone" : "+1-555-0123" ,
"address" : {
"@type" : "PostalAddress" ,
"streetAddress" : "123 Main St" ,
"addressLocality" : "City" ,
"addressRegion" : "State" ,
"postalCode" : "12345"
}
}
</script >
</head >
2. Semantic URL Structure https://example.com/ (home)
https://example.com/about/ (about page)
https://example.com/services/ (services)
https://example.com/services/consulting/ (specific service)
https://example.com/blog/ (blog listing)
https://example.com/blog/article-title/ (blog post)
https://example.com/contact/ (contact)
Deployment Preparation
1. Build Process
Minify CSS and JavaScript
Optimize images for web
Generate sitemap.xml
Create robots.txt
Set up proper file structure
Test cross-browser compatibility
2. File Structure project/
├── index.html
├── about/
│ └── index.html
├── services/
│ └── index.html
├── contact/
│ └── index.html
├── css/
│ ├── main.css
│ └── critical.css
├── js/
│ ├── main.js
│ └── modules/
├── images/
│ ├── optimized/
│ └── icons/
├── fonts/
│ └── custom-fonts.woff2
├── sitemap.xml
├── robots.txt
└── .htaccess (for Apache)
3. Deployment Checklist
Implementation Strategy When creating a complete website:
Discover Requirements : Understand business goals, target audience, and brand identityPlan Architecture : Design sitemap, user flows, and content structureCreate Design System : Establish colors, typography, and component patternsBuild Pages : Create each page with semantic HTML and modern CSSAdd Interactivity : Implement forms, navigation, and dynamic featuresOptimize Performance : Ensure fast loading and smooth interactionsTest Thoroughly : Check responsive design, accessibility, and functionalityPrepare for Deployment : Optimize files and create deployment package Generate complete, production-ready websites that are beautiful, functional, and optimized for success.
